Simple Recipe Page Design Preview

Thank you! I appreciate the response in taking time to review the code. So for the .flex-container class, I edited the padding

.flex-container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        border-radius: 0;
    }```
as well as the image div
.img-bg {
        margin: -30px -30px 0 -30px;
    }```
The issue is not solved perfectly but this is the closest thing I can get

Hi Jedy.

Mobile/Tablet CSS

@media screen and (max-width: 992px)
.flex-container {
    width: 100%;

Desktop CSS

.flex-container {
    width: 50%;
    margin: auto;
}

Your CSS Explained

The media query sets the flex-container to 100% width on any resolution less than 992px. So, tablets/mobiles. Because this container contains all your sections, and your sections do not have a width set, they will take up 100% of space available in .flex-container and span the full page width.

For devices above 992px in resolution, like desktops, they will instead have this container set to 50% and a margin: auto applied to center it. As you can guess, this would also limit the parents children (sections) to a max width of 50% of the viewport width, and center them.

By limiting the width of these sections to 50%, and centering them, their borders also only take up this amount of space. The sections are not "occupying the width of their contents" but instead occupying the width of their parent, which is .flex-container, which is 50%.

What should you do?

If you don't want the border/sections to take up full width on mobile you could:

1. Set a different width for flex-container
2. Add margin/padding to body element
3. Set max-widths for nested sections

Hope this helps, feel free to ask any questions.