On the mobile version of the page there is a white line on the right side-CodePudding

There is a white line on the right side

First, I tried to set up

section{
    width: 100%;
}

then

@media (max-width:420px){
    section{
        width: 100%;
    }
}

Didn't help. Link for full code: https://codepen.io/andrzej-hnatiuk/pen/xxXWYjx In codepen some pictures won't open, but in VScode they do.

How I can fix this?

CodePudding user response：

Your navigation (<section id=section) is too wide, which forces to make the page wider as the screen is. The block below does not grow along.

Solution: let your navigation break on multiple lines, or use a hamburger menu. It depends on how you would like your page to look.

CodePudding user response：

Your problem is your section with #section id. under a specific width size it won't be smaller more, so then content will get smaller and create a white gap on left.
you can decrease your font-size on media query for section #section or using wrap flex box to wrap your section #section under a specific width size or another thing like left panel etc.

CodePudding user response：

This problem happens because the content is overflowing, simply you can add this lines of code and everything will work out.

*{
    box-sizing: border-box;
    margin: 0;
}
section,footer{
    overflow: hidden;
    white-space: wrap;
    word-break: break-word;
}

here is a new pen Codepen