Estoy intentando maquetar esta estructura donde la imagen sobresale del contenedor a la izquierda, como si fuera un elemento "full width", mientras que la columna del párrafo respeta el max-width que le he dado al elemento contenedor padre.
Lo que busco es que el párrafo que está al lado de la imagen no se salga de la grilla delimitada por las líneas azules, como el primer párrafo, pero que la imagen sí que sobresalga.
La estructura HTML sería tal que así:
<div class="contenido">
<div class="contenedor-max">
<p>Párrafo 1</p>
<div class="seccion">
<img src="https://lorempixel.com/1920/1080/"/>
<p>Párrafo de ejemplo</p>
</div>
<div class="seccion">
<img src="https://lorempixel.com/1920/1080/"/>
<p>Párrafo de ejemplo</p>
</div>
<p>Párrafo 2</p>
</div>
</div>
Y el CSS:
.contenido {
width: 100%;
}
.contenedor-max {
margin: 0 auto;
max-width: 1100px;
}
.seccion {
align-items: center
display: flex;
}