爲什麼這些框不會顯示爲一致？

我希望所有的盒子都能做得完美無瑕，但由於某種原因，從第二排開始，他們開始向左傾斜。爲什麼這些框不會顯示爲一致？

$(document).ready(function() { 
 
    number = 0; 
 
document.getElementById("create").onclick = function() { 
 
    var ok = true; 
 
    boxHTML = document.getElementsByClassName("box")[number].innerHTML; 
 
    if (ok === true) { 
 
      var obj = document.createElement('div'); 
 
      obj.className = 'box'; 
 
      obj.innerHTML = boxHTML; 
 
      $(this).before(obj); 
 
    } 
 
    number++; 
 
};});

//Colours 
 
$Background:#EAEAEA; 
 

 
//Body 
 
body{ 
 
} 
 
//Menu 
 
#menu { 
 
    margin-left: 5%; 
 
    margin-top: 5.25rem; 
 
    position:absolute; 
 
    ul{ 
 
    list-style-type: none; 
 
    } 
 
    li{ 
 
    a{ 
 
     padding: 10px 15px; 
 
     text-decoration: none; 
 
     display: block; 
 
     color: black; 
 
     font-family: "roboto", sans-serif; 
 
     &:hover { 
 
     text-transform: uppercase; 
 
     } 
 
    } 
 
    } 
 
} 
 

 
//Dashboard 
 
#dashboard{ 
 
    display: inline-block; 
 
    border-radius:5px; 
 
    border: 0.5px solid black; 
 
    width: 73%; 
 
    height: 35rem; 
 
    margin-left: 17%; 
 
    margin-right: 20%; 
 
    margin-top: 6.8rem; 
 
    position: absolute; 
 
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.8); 
 
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.8); 
 
    box-shadow:0 0 10px rgba(0,0,0,0.8); 
 
} 
 

 

 
//Boxes 
 
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700); 
 
html, * { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background: #e4e9f0; 
 
    padding: 40px; 
 
} 
 
.box { 
 
    float: left; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 45%; 
 
    background: white; 
 
    padding: 30px; 
 
    margin-right: 2%; 
 
    margin-left: 4%; 
 
    margin-top: 3%; 
 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
    + .box { 
 
    margin: 0px; 
 
    margin-top: 3%; 
 
    } 
 
    &:after { 
 
    padding-top: 30%; 
 
    display: block; 
 
    content: ''; 
 
    } 
 
    > div { 
 
    float: left; 
 
    width: 100%; 
 
    height: 150px; 
 
    color: #fff; 
 
    } 
 
    header { 
 
    background: #533687; 
 
    display: block; 
 
    margin: -30px -30px 30px -30px; 
 
    padding: 10px 10px; 
 
    h2 { 
 
     line-height: 1; 
 
     padding: 0; 
 
     margin: 0; 
 
     font-family: "roboto", sans-serif; 
 
     font-weight: 600; 
 
     font-size: 20px; 
 
     color: white; 
 
     -webkit-font-smoothing: antialiased; 
 
    } 
 
    } 
 
} 
 

 
#create { 
 
    user-select:none; 
 
    padding:20px; 
 
    border-radius:20px; 
 
    text-align:center; 
 
    border:15px solid rgba(0,0,0,0.1); 
 
    cursor:pointer; 
 
    color:rgba(0,0,0,0.1); 
 
    font:220px "Helvetica", sans-serif; 
 
    line-height:185px; 
 
    float:left; 
 
    padding:25px 25px 40px; 
 
    margin:0 20px 20px 0; 
 
    width:250px; 
 
    height:250px; 
 
    margin-top: 3%; 
 
} 
 

 
#create:hover { border-color:rgba(0,0,0,0.2); color:rgba(0,0,0,0.2); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dashboard"> 
 
    <a href="#" class="box"> 
 
     <header><h2>Responsive C3</h2></header> 
 
     <div id="chartA"> 
 
     </div> 
 
    </a> 
 
    <div id="create">+</div> 
 
    </div>

JSFiddle

來源

2017-02-19 Ranj Salih