此问题已经在这里有了答案:
为什么通常在中心显示具有“老板”类的div时,具有“容器”类的div紧靠左边缘?
对于具有“ boss”类的div,我指定了宽度和最大宽度,并且一切正常,但是当我向“ container”类编写相同的代码时,将内容按到左侧
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.header {
background-color: coral;
}
.boss {
width: 100%;
max-width: 1100px;
background-color: #313030;
margin: 20px auto;
}
.container {
width: 100%;
max-width: 1100px;
}
.menu {
display: flex;
justify-content: center;
}
.button {
padding: 40px 30px;
transition: background-color .2s linear;
}
.button:hover {
opacity: 2;
background-color: red;
}
.link {
color: white;
text-decoration: none;
}
<body>
<header class="header">
<div class="boss">
<!-- works fine -->
<div class="menu">
<div class="button"><a class="link" href="#">HOME</a></div>
<div class="button"><a class="link" href="#">PORTFOLIO</a></div>
<div class="button"><a class="link" href="#">ABOUT US</a></div>
<div class="button"><a class="link" href="#">CONTACT</a></div>
</div>
</div>
<div class="container">
<!-- have a problem -->
Example
<div class="text">
Example
</div>
</div>
</header>
</body>
您没有正确定位.container
...如果您希望它与.boss
相同,则应给它一个margin: 20px auto
。
[我没有像在“老板”类中那样写“ margin:0px auto”这行