title: Space Between Nav
body: <p>How do I make a nice header/nav section?</p>
  
  <p>This is my code:</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: 0px;
  }
  
  .container {
    width: auto;
    height: 1920px;
    background-color: #514367;
  }
  
  header {
    width: 100%;
    height: 70px;
    background-color: #647551;
    top: 0px;
  }
  
  nav ul {
    margin: 0px;
    padding: 24px 0px 5px 30px;
  }
  
  nav li {
     margin-right: 40px;
     list-style: none;
     text-decoration: none;
     display: inline;
  }
  
  nav li a {
     text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;link href="css/Main.css" type="text/css" rel="stylesheet" /&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;Talkody - Design Services&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div class="container"&gt;
           &lt;!-- Menu start --&gt;
           &lt;header&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/index.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="portfolio/index.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="contact/index.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/nav&gt;
           &lt;/header&gt;
           &lt;!-- Menu end --&gt;
           &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So what I want. I want the text a little bit more in the middle. Wait!, let's tell it in a another way. You see the 'StackExchange' navbar above?; Well, that's what I want. I want the text on the right (but centered in the middle area) and then a logo on the left (but also centered in the middle area).</p>
  
  <p>I'm trying to improve my acknowledge in HTML5. So I started working with the nav and header function.</p>