title: How to position certain elements in the navbar on the right
body: <p>I've been working on a navbar for a website and wanted to have 4 elements on the left side of the screen and 2 on the right side of the screen. I'm sure there is a simple solution, but I'm just not getting the elements to float left and right.</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div id="navbar"&gt;
          &lt;ul&gt;
              &lt;!--&lt;li&gt;&lt;a href="index.html" class="logo"&gt;&lt;img src="../img/PowerUpLogo.gif" class="logo"&gt;&lt;/a&gt;&lt;/li&gt;--&gt;
              &lt;li&gt;&lt;a href="home.html"&gt;Brand&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="stories.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="community.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;span class="padding"&gt;&lt;a href="log_in.html" class="button button-log-in"&gt;Log In&lt;/a&gt;&lt;/span&gt;
              &lt;span class="padding"&gt;&lt;a href="sign_up.html" class="button button-sign-up"&gt;Sign Up&lt;/a&gt;&lt;/span&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here's my CSS:</p>
  
  <pre><code>/*****NAVBAR****/
  #navbar ul {
      padding: 0;
      margin: 0;
      overflow: hidden;
  }
  
  #navbar ul li {
      display: inline-block;
      padding: 1.5% 2%;
  }
  
  #navbar ul li a {
      color: #4F8E64;
      font-size: 0.9em;
      font-weight: 500;
  }
  
  #navbar ul li a:hover {
      text-decoration: underline;
  }
  
  /**********************
  ******NAV BUTTONS******
  **********************/
  
      .button {
      font-size: 0.9em;
  }
  
  .button-log-in {
      color: #6EC78B;
      background-color: #FFF;
      border: 1px solid #6EC78B;
  }
  
  .button-log-in:hover {
      color: #5CE68A;
      border: 1px solid #5CE68A;
  }
  
  .button-sign-up {
      color: #FFF;
      background-color: #6EC78B;
  }
  
  .button-sign-up:hover {
      background-color: #5CE68A;
  }
  </code></pre>