A friend asked me to help them with their web page but I can't quite figure it out. He wants the text to be aligned with the image above (everything is centered as a section with margin: auto; and max-width: 1300px) while the image on the right should extend to the right of the page like in the image, but I can't make the image be at the right without messing up the alignment of the text.

I tried using position: relative; on the image but I can't make it stick to the right of the page. I also tried making the image the background-image of the green section but when I zoom in a bit the text seems to overlap. Any other solution I had messed with the text.

.verde2{
    width: 100%;
    height: 500px;
    background-color: #00824B;
}
.verde-container{
    display: flex;
    max-width: 1300px;
    height: inherit;
    margin: auto;
}
.verde2-text, .verde2-poza{
    
    height: inherit;
}
.verde2-text h3 {
    margin-top: 0;
    font-size: 1.8em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.verde2-text{
    display: flex;
    flex-direction: column;
    padding: 25px;
    padding-left: 0px;
    gap: 25px;
    width: 60%;
}

.verde2-poza{
    width: 40%;
    height: 500px;
    background-image: url(/800);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

<section class="verde2">
  <div class="verde-container">
    <div class="verde2-text">
      <h3>
        <img class="verde-icon" src="/100" alt="iconss">
        De ce este importanta<br>durabilitatea?
      </h3>
      <p>Exista multe avantaje pentru durabilitate, atat pe termen scurt, cat si pe termen lung. Nu putem mentine ecosistemele Pamantului sau nu putem continua sa functionam asa cum o facem daca nu se fac alegeri mai durabile.Daca procesele daunatoare sunt mentinute fara nicio modificare, este probabil ca vom ramane fara combustibili fosili, un numar mare de specii de animale vor disparea si atmosfera va fi afectata iremediabil. Aerul curat si conditiile atmosferice netoxice, cresterea resurselor pe care se poate baza, precum si calitatea si curatenia apei sunt toate beneficii ale sustenabilitatii.</p>
    </div>
    <div class="verde2-poza"></div>
  </div>
</section>

A friend asked me to help them with their web page but I can't quite figure it out. He wants the text to be aligned with the image above (everything is centered as a section with margin: auto; and max-width: 1300px) while the image on the right should extend to the right of the page like in the image, but I can't make the image be at the right without messing up the alignment of the text.

I tried using position: relative; on the image but I can't make it stick to the right of the page. I also tried making the image the background-image of the green section but when I zoom in a bit the text seems to overlap. Any other solution I had messed with the text.

.verde2{
    width: 100%;
    height: 500px;
    background-color: #00824B;
}
.verde-container{
    display: flex;
    max-width: 1300px;
    height: inherit;
    margin: auto;
}
.verde2-text, .verde2-poza{
    
    height: inherit;
}
.verde2-text h3 {
    margin-top: 0;
    font-size: 1.8em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.verde2-text{
    display: flex;
    flex-direction: column;
    padding: 25px;
    padding-left: 0px;
    gap: 25px;
    width: 60%;
}

.verde2-poza{
    width: 40%;
    height: 500px;
    background-image: url(https://picsum.photos/800);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

<section class="verde2">
  <div class="verde-container">
    <div class="verde2-text">
      <h3>
        <img class="verde-icon" src="https://picsum.photos/100" alt="iconss">
        De ce este importanta<br>durabilitatea?
      </h3>
      <p>Exista multe avantaje pentru durabilitate, atat pe termen scurt, cat si pe termen lung. Nu putem mentine ecosistemele Pamantului sau nu putem continua sa functionam asa cum o facem daca nu se fac alegeri mai durabile.Daca procesele daunatoare sunt mentinute fara nicio modificare, este probabil ca vom ramane fara combustibili fosili, un numar mare de specii de animale vor disparea si atmosfera va fi afectata iremediabil. Aerul curat si conditiile atmosferice netoxice, cresterea resurselor pe care se poate baza, precum si calitatea si curatenia apei sunt toate beneficii ale sustenabilitatii.</p>
    </div>
    <div class="verde2-poza"></div>
  </div>
</section>

• javascript
• html
• css

• If you could create a StackBlitz (or similars) it would be nicer rather than having the codeblocks lying around :) – R1D3R175 Commented Feb 5 at 1:10
• 2 @R1D3R175 on Stack Overflow we discourage links to external sites like Codepen, jsFiddle and StackBlitz. We prefer runnable examples to be built into the question as a stack snippet. – Brett Donald Commented Feb 5 at 3:19

3 Answers 3

max-width: 1300px; in .verde-container is limiting where your image can extend. I suggest you take your texts and image out of there, then make a grid instead.

.verde2{
    ...
    display: grid;
    grid-template-columns: 60fr 40fr;
}

This way, you can make the image extend to 100% in a space you wanted it to be.

.verde2-poza {
    width: 100%;
    ...
}

The HTML code would look like this after removing the .verde-container.

<section class="verde2">
    <div class="verde2-text">
        ...
    </div>
    <div class="verde2-poza">
        ...
    </div>
</section>

A common design pattern is to have a central column of limited width, but still have selected sections where the background appears across the entire width. Looking at how this pattern can be implemented will help with your scenario.

The way I implement this pattern is to have a limited width container, then the full-width sections have negative side margins and compensating side padding. To stretch an image to the edge in a particular section, you can override the side padding.

:root {
  --main-width: 500px;
}

body {
  margin: 0;
}

main {
  max-width: var(--main-width);
  margin: 0 auto;
  padding: 0 1em;
}

section {
  margin: 0 min(-1em, (100vw - var(--main-width)) / -2);
  padding: 1px max(1em, (100vw - var(--main-width)) / 2);
  background: aliceblue;
  box-sizing: border-box;
}

section figure {
  margin: 0;
  position: relative;
}

section img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

section.image-left, section.image-right {
  display: grid;
  gap: 1em;
  padding-top: 0;
  padding-bottom: 0;
}

section.image-left {
  padding-left: 0;
  grid-template-columns: 50vw 1fr;
}

section.image-right {
  padding-right: 0;
  grid-template-columns: 1fr 50vw;
}

section.image-full {
  padding: 0;
}

section.image-full figure {
  height: 10em;
}

<main>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed.
  </p>
  <section>
    <p>
    Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.
    </p>
  </section>
  <p>
  Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
  <section class="image-left">
    <figure><img src="https://picsum.photos/600"></figure>
    <p>
    Curabitur eget ullamcorper justo, sit amet dictum neque. Fusce vitae ligula et felis auctor vulputate vel suscipit nibh. Integer a felis varius purus vestibulum viverra. Morbi venenatis placerat augue sit amet commodo. Sed dapibus molestie eros, vitae ultrices nunc commodo aliquam.
    </p>
  </section>
  <section class="image-right">
    <p>
    Sed sed cursus leo. Nam molestie eleifend leo, nec fermentum risus maximus ac. Pellentesque eget placerat ipsum. Vestibulum tempor quam justo. Fusce dapibus turpis non ante faucibus suscipit. Fusce rhoncus eleifend ipsum et lacinia. Curabitur nec congue arcu. Mauris dignissim magna ligula.
    </p>
    <figure><img src="https://picsum.photos/610"></figure>
  </section>
  <p>
  Mauris vulputate quam ac purus laoreet, nec ultrices eros placerat. Fusce id nisi ex. Nunc ornare tellus nisl, suscipit fermentum quam sodales sit amet. Ut ex magna, tempor nec ex sed, ornare ornare sem. Proin gravida turpis urna, vitae posuere purus consequat sit amet. Donec laoreet tempor massa. Praesent porta mauris vitae neque condimentum, non volutpat felis eleifend.
  </p>
  <section class="image-full">
    <figure><img src="https://picsum.photos/1200/600"></figure>
  </section>
  <p>
  Aliquam aliquam a est eget cursus. Ut eu tempus justo, rutrum dapibus ex. In hac habitasse platea dictumst. Nulla ornare nisi sit amet arcu semper maximus. Praesent eu augue eget mi sodales sodales. Praesent sodales neque malesuada, euismod est in, lobortis turpis. Nam blandit facilisis mauris. Ut ac ex rhoncus, ornare velit ac, aliquam nibh. Quisque euismod mauris quis nisl consectetur vulputate. Pellentesque mattis, tellus ut dictum dictum, urna ligula sodales magna, euismod malesuada ipsum quam nec elit.
  </p>
</main>

After running the snippet, remember to use the full page link to get a better view.

So, in your case I would apply the same technique. Just note that in both my code above and your code which I have adjusted below, I am using a width for the central column of 500px instead of the 1300px you are using. This is just so that the examples make more sense when running in the small frames provided here on Stack Overflow.

body {
  margin: 0;
}

.verde2 {
  height: 500px;
  background-color: #00824B;
  color: white;
}

.verde-container {
  height: 100%;
  padding-left: calc((100vw - 500px) / 2);
  display: grid;
  grid-template-columns: 1fr 50vw;
  gap: 2em;
  box-sizing: border-box;
}

.verde2-text {
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: center;
}

.verde2-text h3 {
  margin-top: 0;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.verde2-poza {
  background-image: url(https://picsum.photos/800);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

<section class="verde2">
  <div class="verde-container">
    <div class="verde2-text">
      <h3>
        <img class="verde-icon" src="https://picsum.photos/60" alt="iconss">
        De ce este importanta<br>durabilitatea?
      </h3>
      <p>Exista multe avantaje pentru durabilitate, atat pe termen scurt, cat si pe termen lung. Nu putem mentine ecosistemele Pamantului sau nu putem continua sa functionam asa cum o facem daca nu se fac alegeri mai durabile.Daca procesele daunatoare sunt mentinute fara nicio modificare, este probabil ca vom ramane fara combustibili fosili, un numar mare de specii de animale vor disparea si atmosfera va fi afectata iremediabil. Aerul curat si conditiile atmosferice netoxice, cresterea resurselor pe care se poate baza, precum si calitatea si curatenia apei sunt toate beneficii ale sustenabilitatii.</p>
    </div>
    <div class="verde2-poza"></div>
  </div>
</section>

idk if you wanted something like this but i made the image you shared:

    <section class="verde2">
        <div class="verde2-text">
         <div class="verde-1">
            <img class="verde-icon" src="https://picsum.photos/100" alt="iconss">
            <h3>
                De ce este importanta<br>durabilitatea?
            </h3>
         </div>
            <p>Exista multe avantaje pentru durabilitate, atat pe termen scurt, cat si pe termen lung. Nu putem mentine
                ecosistemele Pamantului sau nu putem continua sa functionam asa cum o facem daca nu se fac alegeri mai
                durabile.Daca procesele daunatoare sunt mentinute fara nicio modificare, este probabil ca vom ramane
                fara combustibili fosili, un numar mare de specii de animale vor disparea si atmosfera va fi afectata
                iremediabil. Aerul curat si conditiile atmosferice netoxice, cresterea resurselor pe care se poate baza,
                precum si calitatea si curatenia apei sunt toate beneficii ale sustenabilitatii.</p>
        </div>
        <div class="verde2-poza"></div>
      </section>


.verde2{
     display: grid;
     grid-template-columns: 1fr 1fr;
        background-color: green;
        width: 80%;
        margin: auto;
    }
    
    .verde2-text{
        padding: 5rem;
    }
    
    .verde2-poza {
    width: 100%;
        height: 500px;
        background-image: url(https://picsum.photos/800);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right;
        overflow: hidden;
    }
    
    .verde-1{
        display: flex;
        align-items: center;
        gap: 1rem;
    }