title: how to have 2 elements next to each other in a nav bar?
body: <p>I have done a lot of looking around and cant quite mine to work, i was hoping with my specific code people would be able to help.
  here is the html:</p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- &lt;h3&gt; Website Title &lt;/h3&gt; --&gt;
  &lt;ul id="navigationBarList"&gt;
    &lt;li&gt;&lt;a href="#About"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Bookings"&gt;Bookings&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Pricing"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="element2"&gt; Sign in &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>and here is the css:</p>
  
  <pre><code>#navigationBarList{
      display: inline-block;
      margin: 0;
      margin-right: 10px;
      padding: 10px;
      background-color: black;    
      font-size: 25px;
      color: red;
      width: 100%;
  }
  #navigationBarList li{
      display: inline;
      width: 100px;
      margin-right: 20px;
  }
  #element2{
      display: inline;
      width: 100px;
      background-color: red;
  }
  </code></pre>
  
  <p>and simply i want the sign in link to be on the same line as the list items. (the reason i have not included it in the list is that i want the list to have equal space in between each element and then a wider gap with the sign in button shoved to the right of the screen but could not work it out so figured i should separate them)</p>
  
  <p>so far this code is just shoving it underneath</p>