'Justify-content' property not working with Flex

August 10, 2022

EDIT: Solved via Kameron’s suggestion. The problem was that I had set the width on the ‘main’ element to 50%.

I am trying to get the two child divs of the ‘main’ element to be centered horizontally.

I have the proper parent container set to my "flex" class, and the two child divs inside. Every other property seems to be working fine, except for justify content.

Tried in both flex directions. Also tried checking in 3 different browsers – same behaviour. The content stays aligned to the left.

body {
  line-height: 1.5;
  min-height: 100vh;
  font-size: 1.6rem;
  max-width: 120rem;
  min-width: 60rem;
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main {
  min-height: 75vh;
  width: 50%;
}

<main class="main flex">
  <div class="main__description">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
  <div class="main__hours">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
</main>

>Solution :

You have width: 50%; on the .main which is only instructing this container to use half of the screen. To fix this, add margin: auto; to .main to center the parent.

body {
  line-height: 1.5;
  min-height: 100vh;
  font-size: 1.6rem;
  max-width: 120rem;
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main {
  min-height: 75vh;
  width: 50%;
  margin: auto;
}

<main class="main flex">
  <div class="main__description">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
  <div class="main__hours">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
</main>

Another option:

Make the .main container width: 100%; so that justify-content: center; places it in the center of the screen, and not in the center of 1/2 of the screen.

body {
  line-height: 1.5;
  min-height: 100vh;
  font-size: 1.6rem;
  max-width: 120rem;
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main {
  min-height: 75vh;
  width: 100%;
}

<main class="main flex">
  <div class="main__description">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
  <div class="main__hours">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
</main>

Side note: remove the min-width on body if you want this to be responsive.