Is there a way to create this layout using CSS? - css

Question

I have two sections: a hero and an about section. There is a container that I am using but for the about section, the image on the left will go outside of the container line, while the content on the right will stay within the container. I have attached a photo of what I am trying to accomplish.
.container {
max-width: 1280px;
margin: 0 auto;
}
#about {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.content {
background-color: #1A969F;
padding: 2rem 8rem 2rem 3rem;
}
<section id="about">
<div class="img">
<img src="about-img.jpg" alt="">
</div>
<div class="content">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, vitae! Quam, ipsam quidem autem numquam ipsa atque debitis similique pariatur aliquid, quibusdam labore mollitia dolorum temporibus et magni, commodi blanditiis.</p>
</div>
</section>

Answer 1

from comments:
yes, with grid you are missing 2 columns. – G-Cyrillus
So we would use two extra grid columns for the about section? Would we still be able to use the container class for the other sections and navbar? - Webdev1995
i made you an example below of the idea of 2 extra columns (but on the parent ;) ) that #about can span through – G-Cyrillus
extra column shoul be used from .container where you did set the max-width inside the grid via minmax() instead max-width on .container.
here is an idea:
.container {
margin: 0 auto;
display: grid;
grid-template-columns: 1fr minmax(auto, 1280px) 1fr
}
section {
grid-column: 2;
background: #bee
}
#about {
grid-column: 1 /span 3;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #eee
}
.content {
background-color: #1A969F;
padding: 2rem 8rem 2rem 3rem;
}
<div class="container">
<section>whatever of 1280px max-width</section>
<section id="about">
<div class="img">
<img src="about-img.jpg" alt="about illustration">
</div>
<div class="content">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, vitae! Quam, ipsam quidem autem numquam ipsa atque debitis similique pariatur aliquid, quibusdam labore mollitia dolorum temporibus et magni, commodi blanditiis.</p>
</div>
</section>
<section>whatever of 1280px max-width</section>
</div>