html – 两个盒子,并排,每个50％,但两者都稍长,不在同一条线上？

我正试图让两个并排的盒子占据屏幕的整个宽度.但是,当将宽度设置为50％时,每个盒子要扩展大约10px,宽度大于50％.我究竟做错了什么？

#sides {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: white;
}

#leftside {
    width: 50%;
    background-color: grey;
    padding: 20px;
    margin: 0px;
    position: relative;
}

#rightside {
    width: 50%;
    display: inline-table;
    background-color: #018DCA;
    float: left;
    padding: 20px;
    margin-left: 50%;
    position: relative;
}

.
.
.

<div id="sides">
 <div id="leftside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
 <div id="rightside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
</div>

解决方法

（编辑：张家口站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!