title: Panels are not lining up
body: <p>I am trying to line up three panels as seen in the screenshot but everything I've tried hasn't fixed the problem. I've tried reducing the panels widths to 30% and floating them, and I have used display:inline and still the problem persists. Any Ideas what is causing this ?</p>
  
  <p><a href="https://i.stack.imgur.com/L6sOo.jpg" rel="nofollow noreferrer">Problem Page</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="row" id="hscontent"&gt;
      &lt;div class="small-12 medium-4 large-4 columns" id="skinny"&gt;
          &lt;div class="panela"&gt;
              &lt;img class="panelimg" src="Images/HS-TAB-TOP-A.png" /&gt;
          &lt;/div&gt;
          &lt;div class="panel" background-color:#2b4e24;&gt;
              &lt;div class="tabhead"&gt;&lt;h5 class="taba"&gt;Our virtual tour !&lt;/h5&gt;&lt;/div&gt;
              &lt;/br&gt;
              &lt;p class="tabpara"&gt;Take a virtual tour of the Horseshoe Bar and Restaurant and see for  
              yourself its unique, alluring and enchanting interior and atmosphere . It’s rich history and 
              heritage combines in a warm and charming blend that mixes traditional Irish decor with ornate   
              old World elegance.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="small-12 medium-4 large-4 columns" id="skinny"&gt;
          &lt;div class="panela"&gt;
              &lt;img class="panelimg" src="Images/HS-TAB-TOP-B.png" /&gt;
          &lt;/div&gt;
              &lt;div class="panel" background-color:#2b4e24;&gt;
                  &lt;div class="tabhead"&gt;&lt;h5 class="tabb"&gt;See our menus&lt;/h5&gt;&lt;/div&gt;
                  &lt;/br&gt;
                  &lt;div class="hstabs"&gt;
                      &lt;a href="default.asp"&gt;&lt;span class="tabby"&gt;Bar Menu&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="default.asp"&gt;&lt;span class="tabby"&gt;Evening Menu&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="default.asp"&gt;&lt;span class="tabby"&gt;Wine Menu&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="default.asp"&gt;&lt;span class="tabby"&gt;Whiskey Menu&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="default.asp"&gt;&lt;span class="tabby"&gt;Gin Menu&lt;/span&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
      &lt;div class="small-12 medium-4 large-4 columns" id="skinny"&gt;
      &lt;div class="panela"&gt;
        &lt;img class="panelimg" src="Images/HS-TAB-TOP-C.png" /&gt;&lt;/div&gt;
          &lt;div class="panel" background-color:#2b4e24;&gt;
              &lt;div class="tabhead"&gt;&lt;h5 class="taba"&gt;Our take on trad&lt;/h5&gt;&lt;/div&gt;
              &lt;/br&gt;
              &lt;p class="tabpara"&gt;At one of the Horseshoe’s music sessions you’ll see and hear all of the 
              splendour that is the Irish traditional music session. A local gathering of talented, and soulful 
              musicians spinning tunes that capture all of the joy, sorrow, humour and heart of a Irish 
              traditional music set. &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>RELEVANT CSS:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  body {
      width:1200px;
  }
  
  .row {
    max-width: 1200px;
  }
  
  #hsback {
      width: 1200px;
      height: 1320px;
      background-image: url('../Images/HSBACK-WIDE.jpg');
      background-repeat: no-repeat;
      background-position: center center;
      padding-right: auto;
      padding-left: auto;
  }
  
  #hscontent {
      margin-top:-640px;
  }
  
  #skinny {
      width:30%;
      float:left;
      display:inline;
  }
  
  .panela {
      display:inline;
  }
  
  panelimg {
      width: 100%;
  }
  
  hr.style1{
      border-top: 1px solid #000;
      width: 80%;
      text-align: center;
      box-shadow: none;
  }
  
  .panel {
      margin-right: auto;
      margin-left: auto;
      background-color: #2b4e24;
      width: 87%;
      overflow:hidden;
      box-shadow: 7px 7px 5px #000000;
  }
  
  .panela img {
      overflow:visible;
      margin-right: auto;
      margin-left: auto;
      width: 100%;
  }
  
  .panela a {
      margin-right: auto;
      margin-left: auto;
      text-align:center;
  }
  
  .taba {
      color: #fff;
      line-height: 1.0;
      font-family: 'Dancing Script', cursive;
      font-weight:400;
      font-size: 2.1rem;
      margin-top:0.5rem;
      text-align:center;
      width:98%;
      border-bottom: 1px Solid #FFFFFF;
      padding-bottom: 0.3rem;
  }
  
  .tabb {
      color: #fff;
      line-height: 1.0;
      font-family: 'Dancing Script', cursive;
      font-weight:400;
      font-size: 2.1rem;
      margin-top:0.5rem;
      text-align:center;
      width:98%;
      border-bottom: 1px Solid #FFFFFF ;
      padding-bottom: 0.3rem;
  }
  
  .tabhead {
      width: 80%;
      margin-right: auto;
      margin-left: auto;
  }
  
  .tabpara {
      color: #fff;
      font-family: 'EB Garamond', serif;
      font-size: 1.2rem;
      line-height: 1.3;
      text-align:center;
      margin-top: -70px;
      word-spacing: -2;
      margin-right: auto;
      margin-left: auto;
      padding:3px;
      width:98%;
  }
  
  .tabcolor {
      background-color: #2b4e24;
  }
  
  .hstabs {
      margin-top: -3.7rem;
      padding-bottom: 0.90rem;
  }
  
  .tabby {
      color: #fff;
      font-family: 'EB Garamond', serif;
      font-size: 1.7rem;
      line-height: 1.2;
      text-align:center;
      text-transform: uppercase;
      padding-top: 0.15rem;
      padding-bottom: 0.15rem;
      display:block;
  }
  
  .tabby {
          text-align:center;
  }
  </code></pre>