title: CSS positioning/size
body: <p>I am using <code>@media all and (max-width: 600px) {}</code> in my css for responsive menu, the thing is that it does not show correctly. </p>
  
  <p><img src="https://i.stack.imgur.com/JHYiZ.png" alt=""></p>
  
  <p>I want the orange fill the green space.. and turn the green space to transparant of course. Basically it's just a size/position problem.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>@media all and (max-width: 600px) {
  
    .example-header .container { 
       width: auto; 
       height:auto; 
       margin:0 auto;
       padding:auto;
    }
    /*Zwarte  MENU balk */
    a.menu-link { 
       display: block; 
       color: #fff; 
       background-color: #333;  
       text-decoration: none; 
       padding: 19px 10px; 
       width:auto; 
       height:auto; 
       margin:0 auto;
       padding:auto;
       margin-bottom:2em;
    }
    .menu { 
       border-top: 10px solid #333;
       border-bottom:10px solid #333;     
       height:13.2em; 
       margin:0 auto;
       padding:auto;
       width:100%;
       background-color:blue;
    }  
    .menu ul { 
       width:auto; 
       height:auto;  
       margin:0 auto;
       padding:auto;
    }
    .menu &gt; ul { 
       height:auto;   
       margin-top:; 
       background-color:TRANSPARANT;
    }
    .menu li, .menu &gt; ul &gt; li { 
       width:100%;
       height:auto; 
       margin:0 auto;
       padding:0px;
       background-color:green;
    }  
    .menu li a { 
       color: #000;
       display: inline; 
       border-bottom: 1px solid #333; 
       position: relative; 
       height:auto; 
       margin:0 auto;
       padding:auto;
       background-color:orange;
    }
  }
  </code></pre>