title: Scrambled menu when resizing
body: <p>When the browser page is full size, the menu is centered in the middle page (That's the correct position) but when resizing the window, the menu isn't visible anymore except by scrolling to the max right of the site. I looked it up to be a responsiveness problem, however i failed to solve it. Any ideas??</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menu" class="menu"&gt;
          &lt;ul class="headlines"&gt;
              &lt;li id="item1"onclick="checklist(this)"&gt;&lt;button onclick="myFunction()"&gt;AA&lt;/button&gt;&lt;/li&gt;
              &lt;li id="item2"&gt;&lt;button onclick="myFunction2()"&gt;A &lt;/button&gt;&lt;/li&gt;
              &lt;li id="item3"&gt;B      &lt;/li&gt;
              &lt;li id="item4"&gt;C      &lt;/li&gt;
              &lt;li id="item5"&gt;D      &lt;/li&gt;
              &lt;li id="item6"&gt;E      &lt;/li&gt;
              &lt;li id="item7"&gt;F      &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>lu, li{
      list-style-type: none;
      font-size: 1.5em;
      height: 40px;
      width: 150px;
      text-align: right;    
      border-style: none;
  }
  
  .menu{
  
      width:150px;
      height: 350px;
  
  }
  
  
  
  .menu li{  
  position: relative;
    top:150px;
    bottom: 0;
    left: 725px;
    right: 0;
    margin: auto; 
    border-style:none;  
  }
  </code></pre>