A container is used to group elements and structures a website in different areas. For example, the text you are reading right now is placed inside a container. The container keeps the text within its width.
Now, if we want to have a full-width image in between the text, there are two ways of I can think of. The first one would be splitting the container into two and placing the image in between. While this works fine, it isn't a very convenient solution, especially when having many images.
Instead, we use the CSS calc function to calculate the needed margin for our images: .img-full { margin: 0 calc(50% - 50vw); }
What happens here is we're taking the 50% width of the container and subtracting 50% of
the current viewport width (50vw), which is pulling the image left to the start of the screen.
We also add a fix height and object-fit: cover. The full class looks like this:
overflow-x: hidden; to the body.