Solution 1 :

It’s the display: flex; that’s causing the issue. Here’s a working model:

#container {
  width: 1200;
  height: 600px;
  margin: auto;
  border: 1px solid grey;
}

.box-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  height: 250px;
  width: 250px;
  margin-left: 25px;
  margin-right: 25px;
  background-color: red;
}

h1 {
  text-align: center;
}
<div id="container">
  <h1>TITLE!!!</h1>
  <div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Solution 2 :

I added a extra wrapper to wrap all the elements and added a display flex to it. Also, You can make use of a gap css property in wrapper class to add extra space between them.

.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  width: 1200px;
  height: 600px;
}

#container {
  margin: auto;
  //border: 1px solid grey;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.box {
  height: 250px;
  width: 250px;
  margin-left: 25px;
  margin-right: 25px;
  background-color: red;
}

h1 {
  text-align: center;
}
<div class="wrapper">
  <h1>TITLE!!!</h1>
  <div id="container">

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Also, the other way to solve this would be to use absolute positioning and adding a top padding to allow space for the div header if extra div is really not required.

Problem :

I want to move the title to green area. If I carry to the container it puts blue area. If I decrease container height title getting closer to the squares. But I want the boxes in the center and the title little above of them. How can I do it?

#container {
  width: 1200;
  height: 600px;
  margin: auto;
  border: 1px solid grey;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  height: 250px;
  width: 250px;
  margin-left: 25px;
  margin-right: 25px;
  background-color: red;
}

h1 {
  text-align: center;
}
<h1>TITLE!!!</h1>
<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

my page

Comments

Comment posted by Arsene Wenger

I can’t see a green area here. Something missing?

Comment posted by Ab Dd

I uploaded a image. at the bottom.

Comment posted by epascarello

So why is the title outside of the div? Sounds like you want an element around the whole thing.

Comment posted by Genevieve McAllister

Thanks @innocent for adding the “run code snippet” option!

By