Center div under section

Question

I don't know what i'm missing here but i can't seem to center my div under a section. Whenever i try to put a margin on the div alone, it also applies a margin to the section tag.

What i want to do is very simple. Put <div class="container"> on the center of the <section id="main">, so the <div class="container"> has space at every side.

Here is my HTML code:

<body>
<section id="main">    
    <div class="container">
       <nav><h2>ALEX\ALBARAN</h2><img src="icon_back.png"></nav><br><br><br>

        <div class="box-1">
            <h1> HELLO! I'M ALEX</h1>
        </div> <br><br>

        <div class="box-2">
            <h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique inventore ipsa optio velit, neque, itaque quasi fugiat impedit libero, vitae temporibus? Quisquam libero voluptas, excepturi non fugiat, perferendis laborum magni!</h3><br><br>
        </div>
        <div class=box-3>
        <i class="fas fa-arrow-circle-down"></i>
        </div>
    </div>
</section>

and here is my CSS code:

nav {
    display: flex;
    justify-content: space-between;

}
h2 {
    font-family: 'Questrial', sans-serif;
    font-weight: 200;
    font-size: 15px;
    color: white;
}

img {
    width:40px;
    height: 40px;
    align-items: flex-end;
}

#main {
    background-color: aqua;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    
}
.container {
    background-image:url(bg1.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
    justify-content: center;
    text-align: center;
    margin: 10% 10%;
}

.box-1 {
    border: 3px solid white;
    background-color: transparent;
    color: white;
    width: 50%;
    padding: auto;
    margin: auto;
    text-align: center;
}

.box-2 {
    font-size: 10px;
    font-weight: 100;
    color: white;
    background-color: transparent;
    width: 50%;
    padding:auto;
    margin:auto;
    text-align: center;
    
}

.box-3 {
    text-align: center;
    color: white;
    padding-bottom: 20px;
}

score 0 · Answer 1 · answered Nov 25 '20 at 01:04

You can use display:flex on main div. Then center .container.

Here is a simplified snippet:

#main {
  background-color: aqua;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.container {
  border: 1px solid red;
  width: 80%;
  height: 80px
}

<section id="main">
  <div class="container">

  </div>
</section>

amadsalmon · Answer 2 · 2020-11-25T01:12:32.227

To center your div, here are the attributes you have to add in the CSS:

.centered-div {
     margin: 0 auto; 
     width: 80%; // specifies a custom width
}

The problem was the margin: 10% 10%. Replace it with the auto margin and the result will be this (run the snippet to see your HTML page displayed):

nav {
    display: flex;
    justify-content: space-between;

}
h2 {
    font-family: 'Questrial', sans-serif;
    font-weight: 200;
    font-size: 15px;
    color: white;
}

img {
    width:40px;
    height: 40px;
    align-items: flex-end;
}

#main {
    background-color: aqua;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    
}
.container {
    background-image:url(bg1.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
    justify-content: center;
    text-align: center;
    margin: 0 auto; ############# HERE IS THE MODIFIED LINE #############
}

.box-1 {
    border: 3px solid white;
    background-color: transparent;
    color: white;
    width: 50%;
    padding: auto;
    margin: auto;
    text-align: center;
}

.box-2 {
    font-size: 10px;
    font-weight: 100;
    color: white;
    background-color: transparent;
    width: 50%;
    padding:auto;
    margin:auto;
    text-align: center;
    
}

.box-3 {
    text-align: center;
    color: white;
    padding-bottom: 20px;
}

<body>
<section id="main">    
    <div class="container">
       <nav><h2>ALEX\ALBARAN</h2><img src="icon_back.png"></nav><br><br><br>

        <div class="box-1">
            <h1> HELLO! I'M ALEX</h1>
        </div> <br><br>

        <div class="box-2">
            <h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique inventore ipsa optio velit, neque, itaque quasi fugiat impedit libero, vitae temporibus? Quisquam libero voluptas, excepturi non fugiat, perferendis laborum magni!</h3><br><br>
        </div>
        <div class=box-3>
        <i class="fas fa-arrow-circle-down"></i>
        </div>
    </div>
</section>

By the way, you forgot to close your <body>.

Center div under section

2 Answers2