css3 marginは機能しませんか？

Question

私はナビゲーションバーを作成するためのセマンティックUIを使用するが、これは私のheader.phpのコード

<div id="mainHead"> 
    <div class="ui pointing menu fluid four item inverted " id="menu"> 
    <a href="index.php" class="item"> 
     <i class="home icon"></i> Home 
    </a> 
    <a href="about.php" class="item"> 
     <i class="user icon"></i> About 
    </a> 
    <a href="portfolio.php" class="item"> 
     <i class="archive icon"></i> Portfolio 
    </a> 
    <a href="contact.php" class="item"> 
     <i class="mail icon"></i> Contact 
    </a> 
    </div> 
    <div class="ui labeled icon button black"> 
    <i class="icon list layout"></i> 
    Menu 
    </div> 
</div> 

であり、これは私のstyle.cssコード

body { 
    margin: 0; 
    padding: 0; 
    font-family: "helvetica", arial; 
} 

#mainHead { 
    margin: 40px 40px 0 40px; 
} 

#menu { 
    max-width: 1024px; 
    margin: 0 auto; 
} 

ナビゲーションバーが表示されていると持っている最大幅1024px、なく、画面の中央に、alredy画面の左端から40ピクセルに固定されている

enter image description here

しかしheder.phpから「item four fluid」を削除した場合 enter image description here

どのようにこの問題を解決できますか？

Answer 1

このように、各アイテムの幅を今のまま維持しながらメニューを中央にしたいと思いますか？もしそうなら、あなたはへ#menuのプロパティ「余裕」の値を設定することができます「！重要な」

#menu { 
     max-width: 1024px; 
     margin: 0 auto !important; 
    } 

以下のような代わり

#menu { 
     max-width: 1024px; 
     margin: 0 auto; 
    } 

のマージン左があるためであるとmargin-rightプロパティを '！important'で0に設定すると、#menuのマージンがオーバーライドされます。