Desired result:
I'm trying to match this design, but I don't seem to find an effective way to do the CSS so that it stays responsive at least for tablet.
The point would be for the image and the text to stay 30px from the center at different screen sizes. The leaf in the background doesn't matter because it's just the background.
I'm currently using a flex container to put the text div and the img.
.about-1 { overflow: visible; max-width: 1048px; margin: auto; padding: 0 16px; .flex-container { display: flex; gap: 30px; } img { max-height: 515px; box-shadow: 0 7px 12px rgba(0, 0, 0, 0.3); opacity: 0.8; margin-bottom: 20px; flex-basis: 50%; overflow: hidden; } .text { flex-basis: 50%; }}<section class="about-1"><div class="flex-container"><div class="text"><h2>En este viaje hacia tu autocuidado...</h2><p> Te acompañaré en un camino de autoconocimiento, en el que estarás aprendiendo a reconocer y gestionar tus emociones, encontrando así tus propios recursos para afrontar los desafíos que la vida te presenta.</p></div><img src="img/bri-espalda.webp" /></div></section>And I get this result:
So the difference is that the image needs to extend all the way to the margin of the page, but overflow: visible on the image it's not working, it just makes the image larger.
How would you accomplish this?