How to add multiple images (full wide from left to right) and still the content to be centered?

[newc0der]

Hello, I need to get a styling like the SpaceX webiste.
link: https://www.spacex.com/

If you check it, you would find that the images are going all the way from left to right but the content is still at the center. How to achieve that?

What I have tried:
I gave body a background-image while the margin: 0 auto so it worked as the image was going from left to right and the content was centered. But when I went for other images I found that I need some kind of separate container and divs to add separate images. Now problem all the images are coming with exact same width as the content, but I need to change this to full width images while the content still be centered.

Code link: https://codepen.io/the_c0der/pen/rNpMGMq

Please note that my code is mess and the images won’t load because I used them locally and there is no way to link to them directly, But you can get idea what I want to say. Sorry for messy code I am total new a self learner.

[ALLESS]

I’ve copied your Codepen here codepen.io/ALLESSANDRA-DE-SAINT-AMORE/pen/XWVjBzX and added Temporary Images to the Background.
You might want to host your Background images online, and place them in the code to make it easier for people to Understand the issues that you are having.

This is a screenshot of the site:

To Clarify, you are asking questions just about the Doubling of photos and the fact that are not centered, Or are there other Issues…

[newc0der]

Hi, Thanks a lot for making my code better. Yes my question is how to double images like 4 images with different headings. Another thing is image should go all the way from left to right and content remains in center.

How to achieve that?