title: Why doesn't my text float on top of my image?
body: <p>I am making a homepage and when I add an image in, my navigation goes under it, I would like to know why it doesn't stay on top. </p>
  
  <p><img src="https://i.stack.imgur.com/lPz5g.png" alt="enter image description here"></p>
  
  <p>This is the html Code.</p>
  
  <pre><code>&lt;img id="img" src="Img/navigation.png"&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;a href="index.html"&gt;&lt;li&gt;Homepage&lt;/li&gt;&lt;/a&gt;
                  &lt;li&gt;Forum&lt;/li&gt;
                  &lt;li&gt;Donate&lt;/li&gt;
                  &lt;li&gt;Vote&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>This is the CSS</p>
  
  <pre><code>nav {
      width: auto;
      float:right;
      padding: 5px 5px 5px 5px;
      display:inline-block;
  }
  
  nav ul{
      list-style:none;
      padding:10px 8px;
  }
  
  nav li{
      list-style:none;
      padding:15px 0;
      display: inline-block;
      font-size: 15px;
      color: green;
  }
  
  nav a,nav a:visited{
      color:#ffffff;
      text-decoration:none;
      font-weight:bold;
      font-size:20px;
  }
  </code></pre>
  
  <p>Why doesn't the text float on top?</p>