title: Trouble with aligning my pictures and text
body: <p>I am designing a website and am struggling with aligning my images as in the picture below (a design I made using adobe indesign).</p>
  
  <p><img src="https://i.stack.imgur.com/fE6Hu.png" alt="enter image description here"></p>
  
  <p>As shown by the fiddle (<code>//</code><a href="http://jsfiddle.net/rupsdino1997/uyL0jdxq/15/" rel="nofollow noreferrer">http://jsfiddle.net/rupsdino1997/uyL0jdxq/15/</a>), my bottom images do not align with my top images, and also they are too far apart, i need them to be closer together as shown in the picture below, also, in the fiddle, the  The House tag is not on the same vertical height as the images, (why is that? and how can that be fixed?)</p>
  
  <p>Thanks a Million!</p>
  
  <p>Code in case fiddle goes down:</p>
  
  <p>HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    var currentPosition = 0;
    var slideWidth = 1000;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;
  
    slideShowInterval = setInterval(changePosition, speed);
    slides.wrapAll('&lt;div id="slidesHolder"&gt;&lt;/div&gt;')
    slides.css({
      'float': 'left'
    });
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);
  
    function changePosition() {
      if (currentPosition == numberOfSlides - 1) {
        currentPosition = 0;
      } else {
        currentPosition++;
      }
      moveSlide();
    }
  
    function moveSlide() {
      $('#slidesHolder')
        .animate({
          'marginLeft': slideWidth * (-currentPosition)
        });
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #wrapper #main ul.horizontal li {
        display: inline-block;
        list-style;
        none;
      }
      #wrapper #main .horizontal img {
        height: 250px;
        width: 200px;
        margin-top: 15px;
      }
      * {
        box-sizing: border-box;
      }
      #wrapper #main ul.horizontal li {
        display: inline-block;
        font-size: 16px;
        list-style;
        none;
        padding: 1em;
        text-align: justify;
        vertical-align: top;
        width: 25%;
      }
      img {
        display: block;
      }
      ul.horizontal {
        list-style;
        none;
        margin: 0;
        padding: 20;
        font-size: 0;
      }
      body {
        margin: 0px;
        color: #151515;
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
        background-color: #EFF5F8;
      }
      #slideshow #slideshowWindow {
        width: 1000px;
        height: 600px;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
      }
      #slideshow #slideshowWindow .slide {
        margin: 0;
        padding: 0;
        width: 1000px;
        height: 600px;
        float: left;
        position: relative;
      }
      #wrapper {
        width: 100%;
        min-width: 740px;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        border: #6627C9;
        background-color: #FFFFFF;
      }
      #slideshow #slideshowWindow .slide img {
        height: 100%;
        width: 100%;
      }
      #top {
        overflow: hidden;
      }
      h1 {
        font-size: 65px;
        margin-top: 0px;
        margin-bottom: 14px;
        color: #3399DD;
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
        max-width: 100%;
        text-align: center;
      }
      h2 {
        margin-top: 0.5em;
      }
      #mainimg img {
        max-width: 100%;
        padding-top: 2px;
        padding-bottom: 2px;
      }
      h1,
      h2 {
        color: #3399CC;
        font-weight: 600;
        font-size: 36px;
      }
      figure {
        display: block;
        width: 740px;
      }
      .centered {
        margin-left: auto;
        margin-right: auto;
      }
      footer {
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 2%;
        background-color: #43a6cb;
        color: #FFFFFF;
      }
      a {
        font-weight: bold;
        text-decoration: none;
      }
      a:link {
        color: #FF6600;
      }
      a:visited {
        color: #FF944C;
      }
      #mainnav a:hover,
      #mainnav a:active,
      #mainnav a:focus,
      #mainnav a.thispage {
        color: #FFFFFF;
        text-decoration: none;
        background-color: #43A6CB;
      }
      #mainnav ul {
        list-style-type: none;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
      }
      #mainnav a {
        width: 20%;
        background-color: #4D4D4D;
        text-align: center;
        text-transform: uppercase;
        color: #FFFFFF;
        padding-top: 6px;
        padding-bottom: 6px;
        display: block;
        float: left;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="wrapper"&gt;
      &lt;header id="top"&gt;
        &lt;h1 style="font-size:60px"&gt;L'Auberge De Napoleon III&lt;/h1&gt;
        &lt;nav id="mainnav"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="Index.html" class="thispage"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="Properties Features.html"&gt;Features&lt;/a&gt;
            &lt;/li&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;a href="article.html"&gt;Article&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;li&gt;&lt;a href="Activities.html"&gt;Activities&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="Contact.html"&gt;Contact US&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="Pricing.html"&gt;Pricing&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;div id="slideshow"&gt;
          &lt;div id="slideshowWindow"&gt;
            &lt;div class="slide"&gt;
              &lt;img id="mainimg" src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" /&gt;
            &lt;/div&gt;
            &lt;div class="slide"&gt;
              &lt;img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" /&gt;
            &lt;/div&gt;
            &lt;div class="slide"&gt;
              &lt;img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;article id="main"&gt;
          &lt;ul class="horizontal" style="padding-top: 15px"&gt;
            &lt;li&gt;
              &lt;h1&gt;The House&lt;/h1&gt;
              &lt;p&gt;
                This magnificient self-catering gite de charme is situated in the centre of Felines-Termenes, a village in the rolling hills of the Hautes Corbieres. It has a lot of cachet and history. Local legend has it that Napoleon III once slept in this former auberge
                on his way waging war with Spain. The oldest foundations of the house are Roman.
              &lt;/p&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg" /&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg" /&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div&gt;
                &lt;img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg" /&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;p style="margin: 0px 30px 10px 30px"&gt;
            The house has been entirely renovated with respect for the original elements like stone walls, wooden beams, … This 5 bedroom house (sleeps 8) is a well equipped property. Situated in one of the most sunny regions of France it profits from a sunny, sheltered
            court yard and garage in the basement. This comfortable property is based in the Languedoc-Roussillon region, famous for its recreational activities as here in Cathar country history meets nature. From the village you can reach famous historic
            towns such as Perpignan, Carcassonne and Narbonne within an hour. Felines is also close to the medieval village of Lagrasse, one of the “les plus beaux villages de France”. A drive to the sea or Spain equally takes you about an hour. Take advantage
            of your stay and visit some vintners, as Felines-Termenes is on the “Route des 20”, a local initiative of the wine growers of the Corbieres. With your family or with friends, you will appreciate the calm of this 180 sq.m. property.
          &lt;/p&gt;
        &lt;/article&gt;
  
        &lt;footer&gt;Powered By Ruben &amp;copy; 2015&lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>