title: How to make a banner take up the whole width of the screen CSS
body: <p>i need the div bar to take up the whole width of the screen. I've tried using width:1920px; but then if i change my screen res it gives it a scroll bar. I've also tried width:100%; but that didn't work either!</p>
  
  <p>CSS </p>
  
  <pre class="lang-css prettyprint-override"><code>#bar {
      background: white;
      font-family: Designio;
      margin-top: -76px;
      position: absoulte;
      top: 115px;
      padding: 15px;
      height: 60px;
      width: 1930px;
      margin-left: -600px;
      background-size: 100%;
  }
  
  body {
      min-width: 768px;
      margin: 0px;
      background: #0e6585;
      font-size: 40px;
  }
  
  img.top {
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  
  #container {
      height: 768px;
      background: #0e6585;
      font-family: Designio
  }
  
  #inner {
      text-decoration: none;
      box-shadow: inset 1px 1px 10px 2px #fff;
      border-radius: 50px;
      margin: 0 auto;
      margin-top: 100px;
      width: 800px;
      height: 600px;
      background: #0e6585;
      padding: 20px;
      color: #946e44;
      text-align: center;
  }
  
  #nav a.active {
      background-color: #0e6586;
      color: white;
  }
  
  #nav {
      height: 10px;
      width: 100%;
      float: left;
      margin: 0 0 1em 0;
      padding: 0px;
      background-color: white;
      margin-top: -10px;
      border-bottom: 1px solid white;
  }
  
  #nav ul {
      list-style: none;
      width: 900px;
      margin: 0 auto;
      padding: 0;
      text-align: center
  }
  
  #nav li {
      float: left;
      text-align: center
  }
  
  #nav li a {
      margin-top: 15px;
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      color: #0e6585;
      border-right: 1px solid #ccc;
      text-align: center
  }
  
  #nav li a:hover {
      color: #0e6586;
      background-color: white;
      text-align: center
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="css/Primary.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container"&gt;
  
              &lt;div id="inner"&gt;
  
                  &lt;div style="margin-top: -120px"&gt;
  
                      &lt;div id ="bar"&gt;
                          &lt;div id="nav"&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;
                                  &lt;li&gt;
                                      &lt;a href="home.html" class="active"&gt;Home&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href="#"&gt;About&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href="#"&gt;Graphics&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href="#"&gt;Web Design&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href="#"&gt;Contact&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>