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

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 >
  <div >
    <div>
      <p>
        Lorem
      </p>
    </div>
    <div >
      <a href="">Yes</a>
      <a href="">No</a>
      <button>Close</button>
    </div>
  </div>
</div>

CodePudding user response：

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 >
    <div >
        <div>
            <p>
                Lorem
            </p>
        </div>
        <div >
            <a href="">Yes</a>
            <a href="">No</a>
            <button>Close</button>
        </div>
    </div>
</div>

CodePudding user response：

You can set button__container to display:inline.

.full-width {
  width: 100%;
}

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

.button__container {
  display: inline;
  justify-content: space-evenly;  
}
.button__container a, .button__container button {
   margin-right: 20px;
}

<div >
  <div >
    <div>
      <p>
        Lorem
      </p>
    </div>
    <div >
      <a href="">Yes</a>
      <a href="">No</a>
      <button>Close</button>
    </div>
  </div>
</div>