divを別のdivに配置するにはどうすればよいですか？

Question

私の内側のdiv要素は、このCSSを持っています

.square3 { 
    border:solid 1px #008CBA; 
    background-color:white; 
    position: relative; 
    width: 100%; 
    max-width:500px; 
    box-sizing: border-box; 
    display: inline-block; 
    float:left; 
} 

.square3:after { 
    content: ""; 
    display: inline-block; 
    padding-bottom: 100%; 
    box-sizing: border-box; 
} 

私の外側のdivが、このCSSを持っています

.monthInfo{ 
    position: relative; 
    width: 100%; 
    max-width:100%; 
    box-sizing: border-box; 
    display: inline-block; 
    float:left; 
    content: ""; 
    display: inline-block; 
    box-sizing: border-box; 
    z-index:1000; 
} 

私は私の外側のテキスト整列与えてみました：中央、および内側のマージン：0自動が、それはうまくいきませんでした。内側divはページの左側にあります。私はそれが中心に留まることを望む。

Answer 1

text-align: centerは、子からfloat: leftを削除すると動作します。

.square3 { 
 
    border:solid 1px #008CBA; 
 
    background-color:white; 
 
    position: relative; 
 
    width: 100%; 
 
    max-width:500px; 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
} 
 

 
.square3:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    padding-bottom: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.monthInfo{ 
 
    position: relative; 
 
    width: 100%; 
 
    max-width:100%; 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    float:left; 
 
    content: ""; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    z-index:1000; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
}

<div class="monthInfo"> 
 
    <div class="square3"> 
 
    </div> 
 
</div>