title: Image doesn't follow the page flow and covers ul
body: <p>When I try to add an image to the bottom of a page, after an <code>&lt;ul&gt;</code>, the image stacks up to this list, not following the flow of the page.</p>
  
  <p>The actual result:
  <img src="https://i.stack.imgur.com/SuJur.png" alt="how the page displays the problem"></p>
  
  <p>The intended result:
  <img src="https://i.stack.imgur.com/W6C7z.png" alt="how it should be"> </p>
  
  <p>with image at the bottom</p>
  
  <p>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>* {
    Font-family: Georgia;
  }
  h1 {
    font-family: "Playfair display";
    color: rgba(0,102,255,0.7);
    background-color: rgba(120, 249, 17, 0.3);
    word-spacing: 0.3 em;
    font-weight: 400;
    letter-spacing: 0.7em;
    text-align: center;
    text-transform: uppercase;
  }
  p,ul,ol {
    color: DarkSlateGrey;
    line-height: 1.8em;;
    word-spacing: 0.3em;
    letter-spacing: 0.05em;
  }
  a { font-style: italic;
  }
  .header {
   /*background: url("https://www.newyorkspaces.com/upload10/122775/Zebide-Emerald-City-MLB308WALL---Copy.jpg") repeat-x    center center;*/
   background-size: contain;
      background-image: -webkit-linear-gradient(#369, #6CC);
   border-style: solid;
   width: 100%;
   margin: auto;
   position: static;
   z-index: 1000;
  }
  .menu {
   word-spacing: 5em;
   width: 100%;
   margin: auto;
   text-transform: uppercase;
  }
  ul {
   width: 80%;
   margin: auto;
   height: 30px;
  }
  #homepage-menu ul li{
   list-style-type: none;
   display: inline;
   border: 1px solid rgba(204,102,102,1);
   background-color: rgba(0,0,255,0.2);
   font-size: 18px;
   width:90%;
   margin: 0px auto;
  }
  .content {
   box-sizing: border-box;
   border-style: 1px solid rgba(204,204,204,1);
   background-color: rgba(102,102,102,0.07);
   width: 50%;
   margin: auto;
   padding-top: 10px;
   /*position: relative;
   top: 10px;
   left: 10px; */
   z-index: 999;
   text-align:justify;
  }
  .link {
   width:50%;
   margin: 0px auto;
   text-align: center;
  }
  .image {
   height: 400px;
   width: 400px;
   display: block;
   margin: 0px auto;3
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  
  &lt;p&gt;So far I have learned the following things:&lt;/p&gt;
  
  &lt;ul&gt;
    &lt;li&gt;Create a boilerplate in HTML&lt;/li&gt;
    &lt;li&gt;Heading and title&lt;/li&gt;
    &lt;li&gt;Create a paragraph&lt;/li&gt;
    &lt;li&gt;Create Un-oredered and Ordered Lists (UL &amp; OL)&lt;/li&gt;
    &lt;li&gt;Insert a link to a page (Hyperlink)&lt;/li&gt;
    &lt;li&gt;Insert Image on your page&lt;/li&gt;
    &lt;li&gt;Insert ALT description for unpaired people&lt;/li&gt;
    &lt;li&gt;Link image to a hyperlink&lt;/li&gt;
    &lt;li&gt;Insert a BREAK onto my page&lt;/li&gt;
    &lt;li&gt;W3C Style standard&lt;/li&gt;
    &lt;li&gt;Insert non visible comment&lt;/li&gt;
    &lt;li&gt;How to set up HTML link to CSS page(style page)&lt;/li&gt;
    &lt;li&gt;Styling FONTS (font-family, font-style, font size, font weight, serif-sans-serif,)&lt;/li&gt;
    &lt;li&gt;SPACING Lines, words and letters with PX - eM - &lt;/li&gt;
    &lt;li&gt;Text TRANSFORM and Text ALIGN&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;   
     &lt;img class="bowie" src="http://esq.h-cdn.co/assets/16/02/980x490/landscape-1452522826-david-bowie-5.jpg"/&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>