Home justify-content is not working when div is wrapped in 'flex' parent container

Questions

justify-content is not working when div is wrapped in 'flex' parent container

March 23, 2022

I have a container that has been set ‘flex’ but I am now trying to pass ‘justify-content: space-evenly’ to the button container but it doesn’t seem to work. Any ideas?

.full-width {
  width: 100%;
}

.banner__container {
  display: flex;
  justify-content: space-evenly;
  background-color: #f6f6f6;
}

.button__container {
  display: flex;
  justify-content: space-evenly;
}

<div class="full-width">
  <div class="banner__container">
    <div>
      <p>
        Lorem
      </p>
    </div>
    <div class="button__container">
      <a href="">Yes</a>
      <a href="">No</a>
      <button>Close</button>
    </div>
  </div>
</div>

>Solution :

Everything is working fine. You just have to set a proper flex value to the child divs of .banner__container.

I have done that by setting flex: 1; to .banner__container div. This will give equal width for each divs inside .banner__container

.full-width {
    width: 100%;
}

.banner__container {
    display: flex;
    justify-content: space-evenly;
    background-color: #f6f6f6;
}

.banner__container div {
    flex: 1;
}

.button__container {
    display: flex;
    justify-content: space-evenly;
}

<div class="full-width">
    <div class="banner__container">
        <div>
            <p>
                Lorem
            </p>
        </div>
        <div class="button__container">
            <a href="">Yes</a>
            <a href="">No</a>
            <button>Close</button>
        </div>
    </div>
</div>