Не удалось правильно разместить заголовок

Question

Я хочу сделать заголовок с некоторыми ссылками меню. Внутренний div не берет край сверху. Пожалуйста, предложите мне написать css для этого.

<div style ="width:100%; background-color:Aqua; height:100px;"> 

    <div style="width:876px;background-color:Blue;margin:20px auto;height:60px;"> 
     <h3>menu items</h3> 
    </div> 

</div> 

Также при изменении размера браузера (нажав Shift + Ctrl + M на Mozilla) внешнее погружение не обернуть внутренний DIV правильно.

Answer 1

вы, вероятно, получить это потому, что ваша вторая ширина фиксируется так независимо от размера браузера, он никогда не меняется в то время как первые изменения ширины, так как она в процентах

<div style ="width:100%; background-color:Aqua; height:100px;"> 

    <div style="width:70%;background-color:Blue;margin:20px auto;height:60px;"> 
     <h3>menu items</h3> 
    </div> 

</div> 

Answer 2

Установите внешний DIV в

display:inline-block 

Answer 3

это fiddle что вы хотите?

HTML

<div class ='outer'> 
    <div class='inner'> 
     <h3>menu items</h3> 
    </div> 
</div> 

CSS

.outer{ 
    width:100%; 
    background-color:Aqua; 
    height:100px; 
    padding-top:20px; 
    min-width:876px; 
} 

.inner { 
    width:876px; 
    background-color:Blue; 
    margin:0 auto; 
    height:60px; 
}