title: CSS Navigation Bar coloring problems
body: <p>I am creating a navigation bar for a website, and I am not having the background color of the nav bar be displayed. When the <code>nav</code> tag has <code>float: left;</code> in the CSS, the color for the background doesn't show. When the <code>nav</code> tag doesn't have <code>float: left;</code>, the background color shows. How can I make the background color present while <code>nav</code> has <code>float: left;</code>?</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="menubar" class="centered"&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="book.html"&gt;Booking&lt;/a&gt;&lt;/li&gt;                    
                  &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  @charset "UTF-8";
  a {
      text-decoration: none;
      font-style: normal;
      font-weight: 600;
      font-family: source-sans-pro;
  }
  ul {
      list-style-type: none;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      margin-top: 0px;
  }
  nav {
      background-color: #4D4D4D;
      float: left;
  }
  li {
      width: 25%;
      text-align: center;
      float: left;
  }
  </code></pre>