嘗試使用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; 

}