-2

Why is the div with the class “container” clinging to the left edge when the div with the class "boss" is normally displayed in the center?

For a div with a "boss" class, I specified the width and the maximum width and everything works fine, but when I write the same code to the "container" class, the content is pressed to the left

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>
saurabh
  • 2,553
  • 2
  • 21
  • 28
Daniil Nedostup
  • 57
  • 1
  • 10

2 Answers2

0

I did not write a line "margin: 0px auto" like in class "boss"

Constantin Groß
  • 10,719
  • 4
  • 24
  • 50
Daniil Nedostup
  • 57
  • 1
  • 10
0

you haven't positioned .container correctly...if you want it the same as .boss then you should give it a margin: 20px auto.

ma_jafari
  • 1,021
  • 1
  • 6
  • 24