css justify-content: space-between; doesn't work

Question

I have 2 photoes that i wanna stay far away from each other. With my actually code the best i could do it s this

but girl photo it's supposed to go righter, till red area ends. But i don't know why isn't working. I tryied a lot of different ways but it really doesn't wanna go to the end of the flex div

.logInPage {
    height: 100vh;
    background: linear-gradient(to right top, #000000, #000000);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    flex-direction: column;
}


.loginSection {
    /* padding-top: 3%; */
    display: flex;

    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 60vh;
    width: 30%;
    /* background: linear-gradient(
        to right bottom,
        rgba(21, 134, 226, 0.7),
        rgba(16, 52, 172, 0.322) */
    /* /* ); */
    background-image: url('https://images.unsplash.com/photo-1499419865879-453926ae8a72?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=633&q=80');
    background-size: 100%;
    z-index: 1;
    border-radius: 2rem;
    border: none;
}


.peoplePhoto {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: red;
    width: 95%;
    z-index: 1;
}

.guy {
    max-width: 40%;
    background: green;
    align-self: flex-end;
}
.girl {
    max-width: 40%;
    background: blue;
}

<div class='logInPage'>
  <div class='loginSection'>
                        <div class='peoplePhoto'>
                            <a>
                                <img
                                    src='https://svgshare.com/i/YTG.svg'
                                    title=''
                                    class='humansPhoto guy'
                                />
                            </a>
                            <a>
                                <img
                                    src='https://svgshare.com/i/YT6.svg'
                                    title=''
                                    class='humansPhoto girl'
                                />
                            </a>
                        </div>
                    </div>
                    </div>

Answer 1

In all the answers above everyone is suggesting some fixes or you can say some tricks. But actually the problem is with your logic.

Actually setting display: flex on .peoplePhoto class will make the two <a> tags as your flex items.

So basically you are applying justify-content: space-between on the <a> elements and not the images.

So now next task is to move the image in the second <a> tag to the end. To do this apply the display:flex property on your second <a> tag. And set justify-content as flex-end. This will shift the image, which is the flex item of <a> tag to the end.

You can see the updated code below.

.logInPage {
    height: 100vh;
    background: linear-gradient(to right top, #000000, #000000);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    flex-direction: column;
}


.loginSection {
    /* padding-top: 3%; */
    display: flex;

    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 60vh;
    width: 30%;
    /* background: linear-gradient(
        to right bottom,
        rgba(21, 134, 226, 0.7),
        rgba(16, 52, 172, 0.322) */
    /* /* ); */
    background-image: url('https://images.unsplash.com/photo-1499419865879-453926ae8a72?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=633&q=80');
    background-size: 100%;
    z-index: 1;
    border-radius: 2rem;
    border: none;
}


.peoplePhoto {
    display: flex;
    flex-direction: row;
   /* justify-content: space-between; This is not needed now */
    background: red;
    width: 95%;
    z-index: 1;
}

.guy {
    max-width: 40%;
    background: green;
}
.girl {
    max-width: 40%;
    background: blue;
}

/*Code added by me*/
.anchor-girl{
   display: flex;
   justify-content: flex-end;
}
/*Code added by me*/

<div class='logInPage'>
  <div class='loginSection'>
                        <div class='peoplePhoto'>
                            <a>
                                <img
                                    src='https://svgshare.com/i/YTG.svg'
                                    title=''
                                    class='humansPhoto guy'
                                />
                            </a>
                            <a class = "anchor-girl">
                                <img
                                    src='https://svgshare.com/i/YT6.svg'
                                    title=''
                                    class='humansPhoto girl'
                                />
                            </a>
                        </div>
                    </div>
                    </div>

Answer 2

You can add this CSS rule to make the second image right-align inside its parent a tag (which, due to the flex setting, is 50% wide automatically):

.peoplePhoto > a:last-child {
  text-align: right;
}

.logInPage {
  height: 100vh;
  background: linear-gradient(to right top, #000000, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  flex-direction: column;
}

.loginSection {
  /* padding-top: 3%; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 60vh;
  width: 30%;
  /* background: linear-gradient(
        to right bottom,
        rgba(21, 134, 226, 0.7),
        rgba(16, 52, 172, 0.322) */
  /* /* ); */
  background-image: url('https://images.unsplash.com/photo-1499419865879-453926ae8a72?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=633&q=80');
  background-size: 100%;
  z-index: 1;
  border-radius: 2rem;
  border: none;
}

.peoplePhoto {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: red;
  width: 95%;
  z-index: 1;
}

.guy {
  max-width: 40%;
  background: green;
  align-self: flex-end;
}

.girl {
  max-width: 40%;
  background: blue;
}

.peoplePhoto>a:last-child {
  text-align: right;
}
.peoplePhoto img {
  vertical-align: top;
}

<div class='logInPage'>
  <div class='loginSection'>
    <div class='peoplePhoto'>
      <a>
        <img src='https://svgshare.com/i/YTG.svg' title='' class='humansPhoto guy' />
      </a>
      <a>
        <img src='https://svgshare.com/i/YT6.svg' title='' class='humansPhoto girl' />
      </a>
    </div>
  </div>
</div>

BTW: If you add vertical-align: top; to the images (as I just did in an edit), you can avoid the empty (red) space below them.

Answer 3

.loginSection{
  width: 100%
  }
  
  .peoplePhoto {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100%; /*As much as you want*/
  }

Answer 4

Apply float:right to the image:

.logInPage {
  height: 100vh;
  background: linear-gradient(to right top, #000000, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  flex-direction: column;
}

.loginSection {
  /* padding-top: 3%; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 60vh;
  width: 30%;
  /* background: linear-gradient(
        to right bottom,
        rgba(21, 134, 226, 0.7),
        rgba(16, 52, 172, 0.322) */
  /* /* ); */
  background-image: url('https://images.unsplash.com/photo-1499419865879-453926ae8a72?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=633&q=80');
  background-size: 100%;
  z-index: 1;
  border-radius: 2rem;
  border: none;
}

.peoplePhoto {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: red;
  width: 95%;
  z-index: 1;
}

.guy {
  max-width: 40%;
  background: green;
  align-self: flex-end;
}

.girl {
  max-width: 40%;
  background: blue;
  float: right;
}

<div class='logInPage'>
  <div class='loginSection'>
    <div class='peoplePhoto'>
      <a>
        <img src='https://svgshare.com/i/YTG.svg' title='' class='humansPhoto guy' />
      </a>
      <a>
        <img src='https://svgshare.com/i/YT6.svg' title='' class='humansPhoto girl' />
      </a>
    </div>
  </div>
</div>