title: Why won't my background Nav bar change colour?
body: <p>I am using the skeleton framework and am trying make a simple nave bar?</p>
  
  <p>When I try and create a nav-bar div and set the css nav- bar id colour to blue the background won't change. However if i try and change the individual columns the colour will change. Is there a way will a grid framework to create a consistent nav bar on top with out telling each column to be a certain colour. this seems silly. 
  Also is it possible to have a nav bar that extends past the frameworks 960px length? I would like to have the bar background extend to both sides of the screen.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="skeleton.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="normalize.css"&gt;
  &lt;/head&gt;
  &lt;div class="container"&gt;
      &lt;div id="nav-bar"&gt;
          &lt;div class="two columns"&gt;
              &lt;h1&gt;DS&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="nav" class="ten columns"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&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;Portfolio&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;!---nav-bar---&gt;
  &lt;/div&gt;&lt;!---container---&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container {
      margin-top: 50px;
  }
  
  #nav-bar {
      background-color: blue;
  }
  
  #nav {
      margin: 13px 0 0 0;
  }
  
  #nav ul li {
      display: inline;
      margin: 0 20px 0 0;
      margin-bottom: 130px;
  }
  
  #nav a {
      text-decoration: none;
      color: black
  }
  
  #nav a:hover {
      text-decoration: underline;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/gp9d7yvz/" rel="nofollow noreferrer">https://jsfiddle.net/gp9d7yvz/</a></p>