title: Why does my fixed navbar dosen't work with images?
body: <p>I wanted to try a fixed navbar, but the images overlap the navbar. if you scroll trough my page the images go over the navbar and the other elements beneath. Is there a way to fix it? i suspect it's about the relative position of my figure but I don't know how to change it.<br>
  Also all suggestions are welcome. I'm a newbie and i want to learn. Thanks in advance. 
  My HTML:</p>
  
  <pre><code>
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Cats&lt;/title&gt;
          &lt;meta name="description" content="Cats and other cute things"&gt;
          &lt;meta name="author" content="Daniel Parpart"&gt;
          &lt;link type="text/css" rel="stylesheet" media="screen" href="stylesheet.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div class="grid"&gt;
          &lt;header class="header"&gt;
           &lt;nav&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Start&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;About me&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
         &lt;/header&gt;
          &lt;div class="main"&gt;
            &lt;figure id="p"&gt;
              &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Gr%C3%BCne_Augen_einer_Katze.JPG/800px-Gr%C3%BCne_Augen_einer_Katze.JPG" alt="cat"&gt;
              &lt;figcaption&gt;Picture by 4028mdk09 / &lt;a href="https://creativecommons.org/licenses/by-sa/3.0"&gt;CC BY-SA&lt;/a&gt;&lt;/figcaption&gt;
            &lt;/figure&gt;
            &lt;h2&gt;Why are cats so cute?&lt;/h2&gt;
            &lt;p&gt;
              Est constias sed mentitum eu fabulas illum ipsum commodo aute.
  
              Do sunt quamquam comprehenderit, ullamco fugiat est probant exquisitaque.
  
              Singulis ut quorum litteris e hic an quorum cillum aliqua.
  
              Incididunt eruditionem aut appellat ad laborum est veniam eiusmod.
  
              Mandaremus esse cernantur probant, fabulas o cupidatat.
  
              Culpa ea incididunt ad culpa concursionibus incurreret quid voluptate.
  
              Officia legam deserunt, veniam praesentibus commodo nulla constias.
            &lt;h3&gt;Five reasons to live&lt;/h3&gt;
            &lt;/p&gt;
            &lt;figure id="p"&gt;
              &lt;img src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Cat_poster_1.jpg" alt="different types of cats"&gt;
              &lt;figcaption&gt;Alvesgaspar / &lt;a href="https://creativecommons.org/licenses/by-sa/3.0"&gt;CC BY-SA&lt;/a&gt;&lt;/figcaption&gt;
            &lt;/figure&gt;
            &lt;p&gt;
              Quo dolore singulis ingeniis aut quo ea illustriora.
            &lt;/p&gt;
            &lt;h3&gt;Another one bits the dust&lt;/h3&gt;
            &lt;p&gt;
              Fugiat aliquip excepteur in quibusdam multos illum cernantur dolor.
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="sidebar"&gt;
            &lt;h4&gt;Advertisment&lt;/h4&gt;
            &lt;figure id="ad"&gt;
              &lt;img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/Bundesarchiv_Bild_183-R94483%2C_Leipzig%2C_Reklame_f%C3%BCr_Fahrradbereifung.jpg" alt="ad"&gt;
              &lt;figcaption&gt;Bundesarchiv, Bild 183-R94483 / &lt;a href="https://creativecommons.org/licenses/by-sa/3.0/de/deed.en"&gt;CC-BY-SA 3.0 / CC BY-SA 3.0 DE&lt;/a&gt; &lt;/figcaption&gt;
            &lt;/figure&gt;
            &lt;p&gt;
            Elit graviterque nescius quae deserunt, pariatur nulla incididunt incurreret.
  
            Incididunt in illum, ut fugiat philosophari.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="twitter"&gt;
            &lt;a class="twitter-timeline" data-height="1400" href="https://twitter.com/Ophur_Cat?ref_src=twsrc%5Etfw"&gt;Tweets by Ophur_Cat&lt;/a&gt; &lt;script async src="https://platform.twitter.com/widgets.js" charset="utf-8"&gt;&lt;/script&gt;
          &lt;/div&gt;
          &lt;footer class="footer"&gt;
            &lt;p&gt;This is a test website.&lt;/p&gt;
          &lt;/footer&gt;
        &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>  background-color: white;
    margin-top: 40px;
  }
  header {
    background-color: #173753;
    width: auto;
    border-radius: 25px;
  }
  /*navbar*/
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #173753;
    border-radius: 15px;
    position: fixed;
    overflow: hidden;
    top: 0;
    width: 100%;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* Change the link color to #111 (black) on hover */
  li a:hover {
    background-color: #111;
  }
  h4 {
    clear: both;
    position: relative;
    text-align: center;
  }
  p {
    margin: 25px;
    text-align: justify;
    /*text-indent: 2em;*/
  }
  footer {
    background-color: #173753;
    text-align: center;
    border-radius: 25px;
  }
  
  .header {
    grid-area: header;
    text-align: center;
  }
  .main {
    grid-area: main;
    background-color: #7fb7be;
    border-radius: 15px;
  }
  .sidebar {
    grid-area: sidebar;
    align-content: center;
    align-items: center;
  }
  .footer {
    grid-area: footer;
  }
  .twitter {
    grid-area: twitter;
  }
  .grid {
    display: grid;
    grid-template-columns: 3fr;
    grid-template-rows: auto;
    justify-content: center;
    align-content: center;
    grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer"
    }
    img {
      width: 100%;
      height: auto;
      border-radius: 25px;
    }
    @media screen and (max-width: 480px) {
      .twitter {display:none;}
      h2 {
        clear: both;
        position: relative;
        text-align: center;
      }
      h3 {
        clear: both;
        position: relative;
        text-align: center;
      }
    }
    @media only screen and (min-width: 768px) {
      .grid {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows: auto;
        justify-content: center;
        align-content: center;
        grid-gap: 5px;
        grid-template-areas:
        "header header header"
        "sidebar main twitter"
        "footer footer footer"
      }
  
  }
  figcaption {
    background-color: black;
    color: white;
    max-width: 400px;
    font-size: 10px;
    display: block;
    float: left;
    position: absolute;
    top: 0;
    margin: 15px 15px auto 15px;
  
  }
  
  
  figure {
    position: relative;
    float: left;
  }
  a {
    color: white;
    text-decoration: none;
  }
  </code></pre>