尝试使用html和css创建响应式网格

Question

对于两个橙色div框in this code看起来有点尴尬。正确的div的边距比左边的div稍微窄一些。我该如何解决？

CSS：

    html {font-size: 1em;}
body {margin: 0; padding: 0;}

.row,
.column {
    box-sizing: border-box;
}
div.box {
        background-color: rgba(230, 126, 34,1);
        width: 37em;
        padding: 2em 0;
        margin-left: 2em;
        margin-top: 2em;
        text-align: center;
        display: inline-block;


.container {
    background-color: slategrey;
    width: 100%;
    height: 72em;

Answer 1

我认为是因为inline: block尝试将其更改为float: left;

div.box {
    background-color: rgba(230, 126, 34,1);
    width: 37em;
    padding: 2em 0;
    margin-left: 2em;
    margin-top: 2em;
    text-align: center;
  //display: inline-block;
    float: left;

}