How to Position an Image on Different Sides of a Container Using CSS?

Question

I’m trying to position the image with the class native and venture on different sides of the container (left, right)and centering both image to the middle but it’s not working as expected.

.us-container {
      height: 400px;
      display: flex;
      justify-content: center;
      margin-top: 60px;
    }

    .native {
      width: 550px;
      height: 300px;
      margin-left: 600px;
    }

    .city {
      width: 430px;
      font-size: 30px;
      color: rgb(0, 0, 0);
      font-family: Georgia, 'Times New Roman', Times, serif;
      margin-top: 80px;
      margin-left: 15px;
    }

    .modern {
      font-family: Georgia, 'Times New Roman', Times, serif;
      width: 400px;
      color: rgb(0, 0, 0);
      gap: 5em;
      font-size: 14px;
      margin-bottom: 300px;
      margin-top: 15px;
      margin-left: 15px;
    }

    .more {
      display: flex;
      align-items: right; 
      background-color: white;
      border-color: black;
      color: black;
      height: 40px;
      font-weight: bold;
      width: 100px; 
      padding-left: 20px;
      padding-top: 9px;
      margin-top: 30px;
    }

    .family-container {
      display: flex;
      height: 200px;
      padding-bottom: 100px;
    }

    .father-container {
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
     
    .venture {
      width: 630px;
      height: 440px;
      margin-top: 0;
      margin-bottom: 300px;
      margin-right: 150px;
    } 

<div class="us-container">
    <img class="native" src="https://ychef.files.bbci.co.uk/1280x720/p0jx74zr.jpg">
    <div class="mother-div">
      <div class="city">The US city reclaiming its Native roots</div>
      <div class="modern">After superheading the modern fights of Native American rights, 
        Minneapolis and nearby Saint Paul are experiencing an indigenous cultural renaissance.
        <button class="more">
          See more
        </button>      
     </div>
     <div class="family-container">
      <div class="daughter-container">
         <p class="city">What may lurk in alien oceans</p>
         <p class="modern">As space agencies  venture onto the moon of jupiter and
          Saturn to look deep below their frozen surface, we might find new forms of life there?
        </p> 
       </div>
        <div class="father-container">
           <img class="venture" src="https://ychef.files.bbci.co.uk/1280x720/p07p8jpp.jpg">
           <div class="mother-div">
           </div>
         </div>
       </div>
    </div>

Here’s what I’ve tried so far:

Using display gird or flexbox, but the images aren't aligning properly. I want the images to stay fixed at the sides of their respective containers.

pls whats is the best way to position these images at different sides within my layout?

Answer 1

Your divs aren't properly closed and that's why your css styles aren't coming out as expected. Calm down and close your divs properly, everything will go fine.