为什么 的类“容器”紧贴左边缘? [重复]

问题描述 投票:-1回答:2

此问题已经在这里有了答案:

为什么通常在中心显示具有“老板”类的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>
html css
2个回答
0
投票

您没有正确定位.container ...如果您希望它与.boss相同,则应给它一个margin: 20px auto


0
投票

[我没有像在“老板”类中那样写“ margin:0px auto”这行

© www.soinside.com 2019 - 2024. All rights reserved.