How to get 2 images inside flexbox items to full screen width

March 13, 2023

I cannot get both images to be the same width with a relative position.
Both images are placed inside a flexbox container, and then placed in another div, item 1 and item 2 respectively.

This is my HTML code:

<!-- parliament background -->
<div class="container">
  <div class="item1">
    <img
      class="img3"
      src="pictures/1920px-Parliament_of_Hungary_November_2017.jpg"
      alt=""
      style="width: 100%"
    />
  </div>
  <!-- parliament end -->
  <!-- mountain background -->
  <div class="item2">
    <img
      class="img4"
      src="pictures/output-onlinepngtools.png"
      alt=""
      style="width: 100%"
    />
  </div>
  <!-- mountain end -->
</div>

This is my CSS code:

/* parliament photo */
.img3 {
  width: 100%;
  height: auto;
  opacity: 20%;
}

/* mountain photo */
.img4 {
  height: auto;
  width: 100%;
}

.container {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

>Solution :

.img3 {
  width: 100%;
  height: auto;
  opacity: 20%;
}

/* mountain photo */
.img4 {
  height: auto;
  width: 100%;
}

.container {
  width:100vw;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  border:1px solid red;
}

.item1{
  width:100vw;
   
}
.item2{
  width:100vw;

}

<!-- parliament background -->
<div class="container">
  <div class="item1">
    <img
      class="img3"
      src="https://cdn.pixabay.com/photo/2023/03/05/14/00/motion-7831456_960_720.jpg"
      alt=""
      
    />
  </div>
  <!-- parliament end -->
  <!-- mountain background -->
  <div class="item2">
    <img
      class="img4"
      src="https://media.istockphoto.com/id/852010454/photo/motion-speed-light-tail-with-night-city-background.webp?s=612x612&w=is&k=20&c=ad5gYPia7h80wQ_tNqdvYdyUbcbLwDWcNikhn9zYW0o="
      alt=""
      
    />
  </div>
  <!-- mountain end -->
</div>

css


.img3 {
  width: 100%;
  height: auto;
  opacity: 20%;
}

/* mountain photo */
.img4 {
  height: auto;
  width: 100%;
}

.container {
  width:100vw;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

.item1{
  width:100vw;

}
.item2{
  width:100vw;
}