Html CSS宽度问题

我有一个集装箱潜水，里面有两个潜水舱

#main_container {
margin: 0 auto;
width: 980px;
padding: 0 0 0 0;
border: none;
}
    .content_third {
    display: inline-block;
    width: 326px;
    padding: 0 0 0 0;
    border: none;
    }

    .content_two {
    display: inline-block;
    width: 653px;
    vertical-align: top;
    padding: 0 0 0 0;
    border: none;
    }




<div id="main_container">
            <div class="content_third">
            hello world!

            </div>
            <div class="content_two">
            Hello World!
            </div>
        </div>

#主容器{
保证金：0自动；
宽度：980px；
填充：0；
边界：无；
}
.content_第三{
显示：内联块；
宽度：326px；
填充：0；
边界：无；
}
.内容二{
显示：内联块；
宽度：653px；
垂直对齐：顶部；
填充：0；
边界：无；
}
你好，世界！
你好，世界！

---

div垂直堆叠，而不是像我需要的那样水平排列。宽度加起来（326px+653px=979px），所以我不明白为什么它们不能正确对齐。你知道这是怎么回事吗？

一个

是一个块级元素，每个元素根据定义开始一个新行。您可以使用

style=“display:inline”

更改此设置，也可以使用

而不是

只需将其添加到divs:
display:inline在CSS中

工作提琴：
查看HTML会有所帮助，但最好的猜测是您有如下内容：

<div class="content_third">
    foo
</div>
<div class="content_two">
    bar
</div>

.content\u第三{
浮动：左；/*删除显示：内联块*/
宽度：326px；
填充：0；
边界：无；
}
.内容二{
浮动：左；/*删除显示：内联块*/
宽度：653px；
垂直对齐：顶部；
填充：0；
边界：无；
}
你好，世界！
你好，世界！
只需添加
浮动：左
添加到两个子DIVs元素。
这就是为什么我在元素中添加了“inline块”。如果我将其中一个宽度减少2px，框就会对齐。这会导致div不占用所需的宽度。
<div class="content_third">
    foo
</div><div class="content_two">
    bar
</div>

.content_third {
float:left; /*remove display:inline-block*/
width: 326px;
padding: 0 0 0 0;
border: none;
}

.content_two {
float:left; /*remove display:inline-block*/
width: 653px;
vertical-align: top;
padding: 0 0 0 0;
border: none;
}


<div id="main_container">
            <div class="content_third">
            hello world!

            </div>
            <div class="content_two">
            Hello World!
            </div>
            <div style="clear:both"></div>    
        </div>