title: How do I make space between <nav> and <section>
body: <p>I'm just looking to get a Space between the <code>&lt;nav&gt;</code> tag and the <code>&lt;section&gt;</code> tag. At the minute in the browser they are flush to each other. I  want to have a space between them, but i'm not sure how.</p>
  
  <p>Here is my simple code -</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE hmtl&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;About Me&lt;/title&gt;
      &lt;srcipt&gt;&lt;/srcipt&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;header&gt;
  
  &lt;h1&gt;About me&lt;/h1&gt;
  
  &lt;/header&gt;
  
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;a href="index.hmtl"&gt;Who I Am&lt;/a&gt; -
              &lt;a href="from.hmtl"&gt;Where I am From&lt;/a&gt; -
              &lt;a href="study.hmtl"&gt;What I am Studying&lt;/a&gt; -
              &lt;a href="more.html"&gt;Race the Flux&lt;/a&gt; -
              &lt;a href="gear.html"&gt;My Gear&lt;/a&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;section&gt;
          &lt;div id="first"&gt;
          &lt;p&gt;
          Nam egestas, nibh non efficitur luctus, nisi eros
          &lt;/p&gt;
  
          &lt;p&gt;
          Nam egestas, nibh non efficitur luctus, nisi eros
  
          &lt;/p&gt;
          &lt;img src="images/Me.jpg"&gt;
  
          &lt;p&gt; 
          Nam egestas, nibh non efficitur luctus, nisi eros
         &lt;/p&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;footer&gt;&lt;a href="from.html"&gt;Next Page&lt;/a&gt;&lt;/footer&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body: lang(en) {
      margin-top: 2em;
  }
  
  body {
  
      text-align: center;
      padding: 0 20px;
      margin: 6em 3% 19em 3%;
      background: #F8F8F8  ;
      color: black;
      font: Arial;
      position: relative;
  
  }
  
  body{
  
      display: block;
  }
  
  
  #first {
  
      font-family: Tahoma, sans-serif;
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
      background-color: #ffffcc;
      width: 550px;
      padding: 10px;
      border: 2px solid black;
      box-shadow: 0 .3em 1em #000;
  }
  
  nav {
  
      box-shadow: 0 .1em 1em #000;
      font-family: Tahoma, sans-serif;
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
      background-color: white;
      width: 40%;
      padding: 10px;
      border: 2px solid black
  
  }
  
  a {
      color: black;
  }
  
  img {
  
      width: 500px;
      border: 2px solid black
  }
  
  
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  
  footer {
  
      font-weight: bold;
      font-family: Tahoma, sans-serif;
      margin: 10;
      padding: 10;
  
  }
  </code></pre>