title: Li elements overflowing out of my Navigation bar (html)
body: <p>I'm a bit new to HTML/CSS and I'm having some trouble with creating properly positioning elements inside my navigation bar.</p>
  
  <p>My <code>li</code> elements are overflowing out of the bar.</p>
  
  <p>This is my code atm:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body class="body"&gt;
  &lt;div class="navbar"&gt;
      &lt;ul class="pull-left"&gt;
          &lt;a href="#home"&gt;&lt;li&gt;Home&lt;/li&gt;&lt;/a&gt;
          &lt;a href="#news"&gt;&lt;li&gt;News&lt;/li&gt;&lt;/a&gt;
          &lt;a href="#about"&gt;&lt;li&gt;About&lt;/li&gt;&lt;/a&gt;
      &lt;/ul&gt;
  
      &lt;ul class="pull-right"&gt;
          &lt;a href="#login"&gt;&lt;li&gt;Login&lt;/li&gt;&lt;/a&gt;
          &lt;a href="#signup"&gt;&lt;li&gt;Sign Up&lt;/li&gt;&lt;/a&gt;
          &lt;a href="#support"&gt;&lt;li&gt;Support&lt;/li&gt;&lt;/a&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="jumbotron"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>    .body {
      border: solid red 3px;
      margin: 0px
  }
  
  .navbar {
      background-color: #99CCFF;
      border:3px solid green;
      display:block;
  }
  
  .navbar ul{
      display:inline;
      font-family: Arial;
  }
  
  .navbar ul li{
      color:white;
      display:inline-block;
      border: solid black 1px;
      margin: -6px 10px 0px 10px;
      padding: 5px;
      background-color: #0099FF;
      text-transform: uppercase;
      transition: background-color 0.5s;
  }
  
  .navbar ul li:hover{
      background-color: black;
  }
  
  .navbar ul li a{
      text-decoration:none;
      display: block;
  }
  
  .jumbotron {
      background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
      height: 600px;
  }
  
  .pull-left {
      float:left;
      padding-left: 10px;
  }
  
  .pull-right {
      float:right;
      padding-right: 10px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/e36oqsqs/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>How do I make my buttons stay inside the navbar and expand it automatically?
  I looked through a lot of similar posts and tried a couple of things, however I couldn't quite get it to work.</p>