Html 面板没有对齐

我正试图将屏幕截图中显示的三个面板排成一行，但我所做的一切都没有解决问题。我已经尝试将面板宽度减少到30%并浮动它们，我使用了display:inline，但问题仍然存在。你知道这是什么原因吗

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">
                    <a href="default.asp"><span class="tabby">Bar Menu</span></a>
                    <a href="default.asp"><span class="tabby">Evening Menu</span></a>
                    <a href="default.asp"><span class="tabby">Wine Menu</span></a>
                    <a href="default.asp"><span class="tabby">Whiskey Menu</span></a>
                    <a href="default.asp"><span class="tabby">Gin Menu</span></a>
                </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>

---

可能有助于解决的几个问题：

• 您使用的标记无效-
  不是标记。我猜你的意思是

• HTML结构无效。存在嵌套不正确的标记和丢失的结束标记。请将您的HTML通过解析器，以确保HTML是正确的。我在下面做了一些更正

正文{
宽度：1200px；
}
.行{
最大宽度：1200px；
}
#后背{
宽度：1200px；
高度：1320px；
背景图像：url（'../Images/HSBACK-WIDE.jpg'）；
背景重复：无重复；
背景位置：中心；
右侧填充：自动；
左填充：自动；
}
#内容{
边缘顶部：-640px；
}
.顶栏{
填充：2.0雷姆；
背景图像：url（'../Images/Menuback TRANS.png'）；
背景重复：无重复；
背景位置：中心；
背景尺寸：包含；
背景色：透明；
}
李先生{
填充顶部：3.0雷姆；
垫底：2.0雷姆；
右侧填充：1.5rem；
字体大小：1.7rem；
颜色：#FFF；
字体系列：“Lora”，衬线；
文字装饰：无；
列表样式类型：无；
}
李先生{
浮动：左；
}
/*使CSS更具体*/
.顶栏a{
文字装饰：无；
颜色：#FFF；
浮动：左；
}
menulogo先生{
浮动：左；
}
#瘦的{
宽度：30%；
浮动：左；
显示：内联；
}
panela先生{
显示：内联；
}
镶板{
宽度：100%；
}
人力资源部1{
边框顶部：1px实心#000；
宽度：80%；
文本对齐：居中；
盒影：无；
}
.小组{
右边距：自动；
左边距：自动；
背景色：#2b4e24；
宽度：87%；
溢出：隐藏；
盒影：7px 7px 5px#000000；
}
.panela img{
溢出：可见；
右边距：自动；
左边距：自动；
宽度：100%；
}
B.panela a{
右边距：自动；
左边距：自动；
文本对齐：居中；
}
塔巴先生{
颜色：#fff；
线高：1.0；
字体系列：“舞蹈脚本”，草书；
字体大小：400；
字号：2.1rem；
边缘顶部：0.5雷姆；
文本对齐：居中；
宽度：98%；
边框底部：1px实心#FFFFFF；
垫底：0.3rem；
}
塔布先生{
颜色：#fff；
线高：1.0；
字体系列：“舞蹈脚本”，草书；
字体大小：400；
字号：2.1rem；
边缘顶部：0.5雷姆；
文本对齐：居中；
宽度：98%；
边框底部：1px实心#FFFFFF；
垫底：0.3rem；
}
塔布黑德先生{
宽度：80%；
右边距：自动；
左边距：自动；
}
塔巴拉先生{
颜色：#fff；
字体系列：“EB Garamond”，衬线；
字号：1.2rem；
线高：1.3；
文本对齐：居中；
利润上限：-70px；
字距：-2；
右边距：自动；
左边距：自动；
填充：3倍；
宽度：98%；
}
tabcolor先生{
背景色：#2b4e24；
}
.hstabs{
最高保证金：-3.7雷姆；
垫底：0.90rem；
}
塔比先生{
颜色：#fff；
字体系列：“EB Garamond”，衬线；
字体大小：1.7rem；
线高：1.2；
文本对齐：居中；
文本转换：大写；
填充顶部：0.15雷姆；
垫底：0.15雷姆；
显示：块；
}
塔比先生{
文本对齐：居中；
}
#威士忌背包{
背景：url（“../Images/NU-whisky-BACK.jpg”）！重要；
背景尺寸：封面；
宽度：100%；
填充：1.0雷姆；
}
.威士忌{
字体系列：“EB Garamond”，衬线；
字体大小：2.8rem；
线高：3.0雷姆；
颜色：#e8d789；
文本对齐：居中；
文本阴影：0 0 14px#e8d789；
填充：0.8rem；
}
.威士忌{
垫面：0.5雷姆；
右侧填充：自动；
垫底：1.5rem；
左填充：自动；
}
.威士忌{
颜色：#f9f8fd；
字体系列：“Lora”，衬线；
字体大小：1.5rem；
字体大小：300；
文本转换：大写；
线高：1.4rem；
文本对齐：居中；
右侧填充：2.5rem；
左侧填充：2.5雷姆；
最高保证金：-1.5雷姆；
}
威士忌{
颜色：#f9f8fd；
字体系列：“Lora”，衬线；
字号：1.2rem；
字体大小：300；
线高：1.5雷姆；
文本对齐：居中；
填充顶部：0.45rem；
垫底：4.2rem；
右侧填充：3.2rem；
左侧填充：3.6rem；
最高保证金：-1.5雷姆；
}
a{
文字装饰：无；
}
/*使CSS更具体*/
/*img{
显示：内联；
}*/
#足部{
背景图像：url（'../Images/FOOTER-BACK-BIG.jpg'）；
背景尺寸：包含；
宽度：100%；
}
#菜单{
衬垫顶部：2.0雷姆；
垫底：2.0雷姆；
}
#脚印{
填充顶部：1.0雷姆；
垫底：2.0雷姆；
左边距：0.1rem；
最高保证金：-3.8雷姆；
}
.footlink{
字体大小：1.5rem；
填充：1.0雷姆；
左边距：1.0雷姆；
颜色：#f9f8fd；
字体系列：“Lora”，衬线；
}
footlinka先生{
字体大小：1.5rem；
填充：1.0雷姆；
左边距：1.0雷姆；
颜色：#f9f8fd；
字体系列：“Lora”，衬线；
}
.脚印{
最高保证金：-5.0雷姆；
右侧填充：1.0rem；
}
#浮脚{
显示：内联；
}
#浮足式img{
最高保证金：-1.0雷姆；
}
.脚印{
边缘顶部：0.5雷姆；
左边距：0.8雷姆；
}

我们的虚拟之旅！


虚拟参观马蹄铁酒吧和餐厅，亲自体验其独特、迷人的内部环境和氛围。它丰富的历史和传统融合在一个温暖而迷人的融合中，融合了传统爱尔兰装饰和
华丽的旧世界优雅
看看我们的菜单


我们对贸易的看法


在马蹄铁音乐节上，你会看到和听到爱尔兰传统音乐的精彩
@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;
}