pedrodelgallego

<style type="text/css" media="screen">
        * {
           -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
       }
        
       .elem {
           border: solid  #6AC5AC 3px;
           position: relative;

pedrodelgallego

<style type="text/css" media="screen">
        * {
           -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
       }
        
       .elem {
           border: solid  #6AC5AC 3px;
           position: relative;

pedrodelgallego

<style type="text/css" media="screen">
        * {
           -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
       }
        
       .elem {
           border: solid  #6AC5AC 3px;
           position: relative;

pedrodelgallego

<nav>
      <ul>
        <li data-section="about-me">
          <a href="#" class="item"> About me </a>
          <ul class="dropdown">
            <li><a href="#" class="item">Early years</a></li>
            <li><a href="#" class="item">First works</a></li>
            <li><a href="#" class="item">Today and tomorrow</a></li> 
            </li>
          </ul>

pedrodelgallego

<nav>
      <ul>
        <li data-section="about-me">
          <a href="#" class="item"> About me </a>
          <ul class="dropdown">
            <li><a href="#" class="item">Early years</a></li>
            <li><a href="#" class="item">First works</a></li>
            <li><a href="#" class="item">Today and tomorrow</a></li> 
            </li>
          </ul>

pedrodelgallego

<nav>
      <ul>
        <li data-section="about-me">
          <a href="#" class="item"> About me </a>
          <ul class="dropdown">
            <li><a href="#" class="item">Early years</a></li>
            <li><a href="#" class="item">First works</a></li>
            <li><a href="#" class="item">Today and tomorrow</a></li> 
            </li>
          </ul>

pedrodelgallego

html{
    height: 100%;
}
body{
    background-image: repeating-linear-gradient(315deg, #ddd, #ddd, 40px, #aaa 40px, #aaa 80px);
    padding: 20px;
    height: 100%;
}
nav{
    margin: 0 auto;

pedrodelgallego

html{
    height: 100%;
}
body{
    background-image: repeating-linear-gradient(315deg, #ddd, #ddd, 40px, #aaa 40px, #aaa 80px);
    padding: 20px;
    height: 100%;
}
nav{
    margin: 0 auto;

pedrodelgallego

/*
  Positioning exercises
*/

.container {
  border:  teal;
}

.box { 
  color: white;

pedrodelgallego

.container {
  position: relative;
  left: 100px;
  margin: 200px auto;
  width: 500px;
  height: 500px;
} 

.circle {
  position: absolute;