title: How do I make the menu in the center of the block?
body: <p>My question is how do I put the menu in the middle of the header block because I can't figure it out.</p>
  <p>I am trying to make a website for my dad's business by using some templates that I find on the internet, this is one of them and I really like but I can't figure out how to center the navbar. I am not the best when it comes to CSS.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }
  
  .logo {
    float: left;
  }
  
  
  /* ~~ Top Navigation Bar ~~ */
  
  #navigation-container {
    width: 1200px;
    margin: 0 auto;
    height: 70px;
  }
  
  .navigation-bar {
    background-color: black;
    height: 70px;
    width: 100%;
  }
  
  .navigation-bar ul {
    padding: 0px;
    margin: 0px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
  }
  
  .navigation-bar li {
    list-style-type: none;
    padding: 0px;
    height: 24px;
    margin-top: 4px;
    margin-bottom: 4px;
    display: inline;
    color: white;
    text-align: center;
  }
  
  .navigation-bar li a {
    color: white;
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-decoration: none;
    line-height: 70px;
    padding: 5px 15px;
    opacity: 0.7;
    text-align: center;
  }
  
  #menu {
    float: right;
    color: white;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;link rel="stylesheet" href="index.css" type="text/css"&gt;
  
  &lt;head&gt;
    &lt;div class="navigation-bar"&gt;
      &lt;div id="navigation-container"&gt;
        &lt;img src="images/logo.png"&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;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Rent a Boat&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Location&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>