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: Geia, 'Times New Roman', Times, serif;
      margin-top: 80px;
      margin-left: 15px;
    }

    .modern {
      font-family: Geia, '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=".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=".jpg">
           <div class="mother-div">
           </div>
         </div>
       </div>
    </div>

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: Geia, 'Times New Roman', Times, serif;
      margin-top: 80px;
      margin-left: 15px;
    }

    .modern {
      font-family: Geia, '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?

• html
• css
• grid

Share Improve this question Follow asked Jan 29 at 17:29 Timothy OlubukolaTimothy Olubukola 322 bronze badges 2

• I'm not entirely clear on the desired display. Did you mean to have something like this? – FiddlingAway Commented Jan 29 at 19:37
• Yes something like that. – Timothy Olubukola Commented Jan 30 at 5:13

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.