Panels are not lining up - html

Question

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 ?
Problem Page
HTML:
<div class="row" id="hscontent">
<div class="small-12 medium-4 large-4 columns" id="skinny">
<div class="panela">
<img class="panelimg" src="Images/HS-TAB-TOP-A.png" />
</div>
<div class="panel" background-color:#2b4e24;>
<div class="tabhead"><h5 class="taba">Our virtual tour !</h5></div>
</br>
<p class="tabpara">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.</p>
</div>
</div>
<div class="small-12 medium-4 large-4 columns" id="skinny">
<div class="panela">
<img class="panelimg" src="Images/HS-TAB-TOP-B.png" />
</div>
<div class="panel" background-color:#2b4e24;>
<div class="tabhead"><h5 class="tabb">See our menus</h5></div>
</br>
<div class="hstabs">
<span class="tabby">Bar Menu</span>
<span class="tabby">Evening Menu</span>
<span class="tabby">Wine Menu</span>
<span class="tabby">Whiskey Menu</span>
<span class="tabby">Gin Menu</span>
</div>
</div>
</div>
<div class="small-12 medium-4 large-4 columns" id="skinny">
<div class="panela">
<img class="panelimg" src="Images/HS-TAB-TOP-C.png" /></div>
<div class="panel" background-color:#2b4e24;>
<div class="tabhead"><h5 class="taba">Our take on trad</h5></div>
</br>
<p class="tabpara">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. </p>
</div>
</div>
</div>
</body>
</html>
RELEVANT CSS:
#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;
}

Answer 1

A few issues that could be contributing:
You're using invalid tags - </br> is not a tag. I assume you meant <br/>
The HTML structure is invalid. There are incorrectly nested tags and missing closing tags. Please put your HTML through a parser to make sure the HTML is correct. I have made some corrections below.
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;
}
.top-bar {
padding: 2.0rem;
background-image: url('../Images/Menuback-TRANS.png');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-color: transparent;
}
.top-bar li {
padding-top: 3.0rem;
padding-bottom: 2.0rem;
padding-right: 1.5rem;
font-size: 1.7rem;
color: #FFF;
font-family: 'Lora', serif;
text-decoration: none;
list-style-type: none;
}
.top-bar li {
float: left;
}
/* Make CSS more specific */
.top-bar a {
text-decoration: none;
color: #FFF;
float: left;
}
.menulogo img {
float: left;
}
#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;
}
#whiskeyback {
background: url("../Images/NU-WHISKEY-BACK.jpg")!important;
background-size: cover;
width: 100%;
padding: 1.0rem;
}
.whiskey {
font-family: 'EB Garamond', serif;
font-size: 2.8rem;
line-height: 3.0rem;
color: #e8d789;
text-align: center;
text-shadow: 0 0 14px #e8d789;
padding: 0.8rem;
}
.whiskeytitle {
padding-top: 0.5rem;
padding-right: auto;
padding-bottom: 1.5rem;
padding-left: auto;
}
.whiskeyparabig {
color: #f9f8fd;
font-family: 'Lora', serif;
font-size: 1.5rem;
font-weight: 300;
text-transform: uppercase;
line-height: 1.4rem;
text-align: center;
padding-right: 2.5rem;
padding-left: 2.5rem;
margin-top: -1.5rem;
}
.whiskeypara {
color: #f9f8fd;
font-family: 'Lora', serif;
font-size: 1.2rem;
font-weight: 300;
line-height: 1.5rem;
text-align: center;
padding-top: 0.45rem;
padding-bottom: 4.2rem;
padding-right: 3.2rem;
padding-left: 3.6rem;
margin-top: -1.5rem;
}
a {
text-decoration: none;
}
/* Make CSS more specific */
/*img {
display:inline;
}*/
#foota {
background-image: url('../Images/FOOTER-BACK-BIG.jpg');
background-size: contain;
width: 100%;
}
#footmenu {
padding-top: 2.0rem;
padding-bottom: 2.0rem;
}
#footmenua {
padding-top: 1.0rem;
padding-bottom: 2.0rem;
margin-left: 0.1rem;
margin-top: -3.8rem;
}
.footlink {
font-size: 1.5rem;
padding: 1.0rem;
margin-left: 1.0rem;
color: #f9f8fd;
font-family: 'Lora', serif;
}
.footlinka {
font-size: 1.5rem;
padding: 1.0rem;
margin-left: 1.0rem;
color: #f9f8fd;
font-family: 'Lora', serif;
}
.footpic {
margin-top: -5.0rem;
padding-right: 1.0rem;
}
#floatfoot {
display: inline;
}
#floatfoot img {
margin-top: -1.0rem;
}
.footlogo {
margin-top: 0.5rem;
margin-left: 0.8rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<header>
<div class="row" id="hsback">
<div class="top-bar">
<ul>
<li>Menus</li>
<li>Special Offers</li>
<li>Testimonials</li>
<li>Rooms</li>
</ul>
<img class="menulogo" src="Images/VINTAGE-SIGN-3A2.png" />
</div>
</div>
</header>
<div class="row" id="hscontent">
<div class="small-12 medium-4 large-4 columns">
<div class="panela">
<img class="panelimg" src="Images/HS-TAB-TOP-A.png" />
</div>
<div class="panel" background-color:#2b4e24;>
<div class="tabhead">
<h5 class="taba">Our virtual tour !</h5>
</div>
<br/>
<p class="tabpara">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.</p>
</div>
</div>
<div class="small-12 medium-4 large-4 columns" id="skinny">
<div class="panela">
<img class="panelimg" src="Images/HS-TAB-TOP-B.png" />
</div>
<div class="panel" background-color:#2b4e24;>
<div class="tabhead">
<h5 class="tabb">See our menus</h5>
</div>
<br/>
<div class="hstabs">
<span class="tabby">Bar Menu</span>
<span class="tabby">Evening Menu</span>
<span class="tabby">Wine Menu</span>
<span class="tabby">Whiskey Menu</span>
<span class="tabby">Gin Menu</span>
</div>
</div>
</div>
<div class="small-12 medium-4 large-4 columns">
<div class="panela">
<img class="panelimg" src="Images/HS-TAB-TOP-C.png" />
</div>
<div class="panel" background-color:#2b4e24;>
<div class="tabhead">
<h5 class="taba">Our take on trad</h5>
</div>
<br/>
<p class="tabpara">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. </p>
</div>
</div>
</div>
<div class="row" id="whiskeyback">
<div class="small-12 medium-6 medium-offset-6 large-5 large-offset-7 columns">
<img class="whiskeytitle" src="Images/WHISKEY-GOLD-3.png" />
<p class="whiskeyparabig">Lorem ipsum dolor sit</p>
<p class="whiskeypara">amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. </p>
</div>
</div>
<footer>
<div class="row" id="foota">
<div class="row" id="footmenu">
<div class="small-12 medium-12 large-12 columns">
<img class="footlogo" src="Images/BEHAN'S-FOOTER-LOGO-GOLD-SMALL.png" />
</div>
</div>
<div class="row" id="footmenua">
<div class="small-12 medium-6 large-6 columns">
<span class="footlink ">Our Menus</span>
<a class="footlink " href="default.asp ">Testimonials</a>
<a class="footlink " href="default.asp ">Rooms</a>
<be/>
<a class="footlinka " href="default.asp ">Take a Tour</a>
<a class="footlinka " href="default.asp ">Our Sessions</a>
</div>
<div class="small-12 medium-3 medium-offset-3 large-3 large-offset-3 columns" id="floatfoot">
<img class="footpic" src="Images/Trip-Advisor-Smallest.png" />
<img class="footpic" src="Images/facebook-Smallest.png" />
</div>
</div>
</div>
</footer>