css3 margin не работает?

Question

css3 margin не работает?

Я использую Semantic UI для создания navbar, это мой код 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;
}

Navbar отображается и имеет максимальную ширину 1024px, но не в середине экрана, alredy фиксируется на 40px от левого края экрана

введите описание изображения здесь

но если я удаляю «жидкость четвертого элемента» из heder.php, получаю это
введите описание изображения здесь

Как мне решить эту проблему?

0

css3 html5 php semantic-ui

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Итак, вы хотите, чтобы меню посередине сохраняло ширину каждого элемента такой же, как сейчас, верно? Если это так, вы можете установить значение свойства ‘margin’ #menu в ‘! Important’, как показано ниже

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

вместо

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

Это связано с тем, что для свойства margin-left и margin-right установлено значение 0 с параметром «Important», которое переопределяет значение поля #menu.

3