title: How to get something inside wrapper 100% browser width
body: <p>This is my problem,
  <p> I have a website with some content, and i want the header to be 100% width of the browser, and some content that's wrapped inside wrapper to make it about.. 50% of the browser width.
  <p>
  Then we have something like this:
  <a href="https://i.stack.imgur.com/YkRcV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YkRcV.png" alt="img1"></a>
  But, we're adding a menu aswell. This is done with UL, and we cant just add the menu (i think), because the content of the menu is going to be in the wrapper.  So it looks like this:
  <a href="https://i.stack.imgur.com/Kd0a3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kd0a3.png" alt="img2"></a><p>
  <strong>What have i tried?</strong>
  I've given the element header/menu this css: </p>
  
  <pre><code>padding-left: 3000px;
  margin-left: -3000px;
  padding-right: 3000px;
  margin-right: -3000px;
  </code></pre>
  
  <p>I also added overflow-x:hidden; on the body element so they cant scroll x wise. But on their phones, they can. So this makes everything "unresponsive"</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;title&gt;Rocket League Prices - Home&lt;/title&gt;
  &lt;body&gt;
   &lt;div class="wrapper"&gt;
    &lt;header&gt;
      &lt;a href="/index.php"&gt;
        &lt;div class="header-1"&gt;
           Rocket League Prices
        &lt;/div&gt;
      &lt;/a&gt;   
   &lt;/header&gt;
       &lt;ul class="nav-top"&gt;
  &lt;li class="nav-top"&gt;&lt;a href="/index.php" title="HOME" class="nav-top"&gt;
      &lt;i class="fa fa-home fa-lg" aria-hidden="true" &gt;&lt;/i&gt;&lt;br&gt;&lt;span     class="meny-text"&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;li class="nav-top"&gt;&lt;a href="/pc.php" title="PC PRICE LIST" class="nav-top"&gt;
      &lt;i class="fa fa-desktop fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;&lt;span class="meny-text"&gt;PC list&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;li class="nav-top"&gt;&lt;a href="/ps4.php" title="PS4 PRICE LIST" class="nav-top"&gt;
      &lt;i class="fa fa-gamepad fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;&lt;span class="meny-text"&gt;PS4 list&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li class="nav-top"&gt;&lt;a href="/certified.php" title="CERTIFIED LIST" class="nav-top"&gt;
      &lt;i class="fa fa-certificate" aria-hidden="true"&gt;&lt;/i&gt;&lt;br&gt;&lt;span class="meny-text"&gt;Certified list&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;li class="nav-top" style="float:right;!important" &gt;
              &lt;a href="#" class="nav-top meny-text" data-toggle="modal" data-    target="#modal-staff"&gt;
                  &lt;i class="fa fa-envelope-o" aria-hidden="true"&gt;&lt;/i&gt;  &lt;br&gt;Staff&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
                    &lt;div class="modal fade" id="modal-staff" role="dialog"&gt;
                  &lt;div class="modal-dialog"&gt;
  
              &lt;!-- Modal content--&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
    overflow-x: hidden;
    }
    header{
  padding: 20px;
  background-color: #1798e5;
  color: black;
  padding-left: 3000px;
  margin-left: -3000px;
  padding-right: 3000px;
  margin-right: -3000px;
  
  }
  ul.nav-top {
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  margin-top: 0 auto;
  float:left;
  color: #34495e;
  display:table-row;
  text-align: center;
  width: 100%;
  margin: 0;
  margin-bottom: 15px;
    list-style-type: none;
    padding-left: 3000px;
  margin-left: -3000px;
  padding-right: 3000px;
  margin-right: -3000px;
  }
  li a.nav-top{
  color: #34495e;
  text-decoration: none;
  padding: 20px 20px;
  }
  li a.nav-top:hover{
  background-color: #f1f2f3;
  color: #1798e5;
  }
  li.nav-top {
  text-decoration: none;
  float: left;
  }
  .wrapper{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  }
  </code></pre>
  
  <p>CODEPEN: <a href="http://codepen.io/anon/pen/QdLpzM" rel="nofollow noreferrer">http://codepen.io/anon/pen/QdLpzM</a></p>