HTML image not in the correct place

Everything is formatting as I want it to, except the tyre isn't in the right place. I'd like the tyre to move directly upwards into the gap I left beside the text.

Here's a codepen version of it: http://codepen.io/anon/pen/qardrz

<!DOCTYPE html>
<html>
 <head>
  <title>Home - Duck Duck Grouse</title>
  <style>

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -5px;
   }

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #444;
    margin-top: -5px;
   }

   .navli {
    float: left;
    width: 25%;
    margin-top: 0px;
   }

   .navli a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
   }

   .navli a:hover:not(.active) {
    background-color: #333;
   }

  .activeNav {
   background-color: #000;
   }

   .navli:last-child {
    border-right: none;
   }

   #spike {
   width: 40%;
   }

   #wew {
   width: 53%;
   margin-left: 3%;
   }

  </style>
 </head>
 <body>

  <img src="https://i.sli.mg/km2FIO.jpg" class="banner" />

  <ul class="navbar">
   <li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
   <li class="navli"><a class="nava" href="contact.html">Contact</a></li>
   <li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
   <li class="navli"><a class="nava" href="menu.html">Menu</a></li>
  </ul>
 <p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here. 
 Founded in 1969, we import only the finest beans grown by slaves in Africa, and 
 we run over entire duck families ourselves, ensuring that they are finely crushed, 
 just to have the freshest roadkill for our famous roast duck recipe. The tires on
 our cars have tiny spikes on them, ensuring your meat is finely tenderised before 
 it even enters the kitchen.</p>

 <img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg" />

 </body>
</html>

Solution

Float the paragraph to the left.

body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -5px;
   }

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #444;
    margin-top: -5px;
   }

   .navli {
    float: left;
    width: 25%;
    margin-top: 0px;
   }

   .navli a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
   }

   .navli a:hover:not(.active) {
    background-color: #333;
   }

  .activeNav {
   background-color: #000;
   }

   .navli:last-child {
    border-right: none;
   }

   #spike {
   width: 40%;
   }

   #wew {
   width: 53%;
   margin-left: 3%;
   float: left;
   }

<body>

  <img src="https://i.sli.mg/km2FIO.jpg" class="banner" />

  <ul class="navbar">
   <li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
   <li class="navli"><a class="nava" href="contact.html">Contact</a></li>
   <li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
   <li class="navli"><a class="nava" href="menu.html">Menu</a></li>
  </ul>
 <p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here. 
 Founded in 1969, we import only the finest beans grown by slaves in Africa, and 
 we run over entire duck families ourselves, ensuring that they are finely crushed, 
 just to have the freshest roadkill for our famous roast duck recipe. The tires on
 our cars have tiny spikes on them, ensuring your meat is finely tenderised before 
 it even enters the kitchen.</p>

 <img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg" />

 </body>

Also, once you do that. Make sure to add an empty div after the image element, and add clear: both in the CSS.