Home>
Resolving web pages and horizontal scrolling

I am replicating the site using HTML, css, bootstrap, etc., but now I can scroll horizontally.
I tried to eliminate horizontal scrolling, tried width: 100%;and tried overflow: auto and hidden, but horizontal scrolling didn't fix.
Also, since I am not sure where to find the solution, I would be happy if you could tell me there.

Error message Applicable source code

* {
font-size: 62.5%;
line-height: 1.6;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
background-color: #fff;
font-family: Meiryo, Hiragino Kaku Gothic Pro sans-serif;
font-size: 1.5rem;
line-height: 1.6;
color: # 333;
transition: transform 0.3s;
width: 100vw;
box-sizing: border-box;
margin: 0;
}

Source code
I tried

width: 100%;and tried overflow: auto and hidden, but horizontal scrolling doesn't work.
I felt that everything on the page protruded to the right. I tried the above on * and body, but it did not go away.

Supplemental information (FW/tool version etc.)

Please provide more detailed information here.

  • Answer # 1

    width: 100vwis the width of the entire window, so
    When an extra width such as "vertical scroll bar" is added in the horizontal direction with body {width: 100vw} specified like this time,

    Window width + extra width = body width

    and the body has a wider width than the window.
    Inevitably, a horizontal scroll bar will appear.

    If you just want to solve the style specified in the body
    The solution is to changewidth: 100vwtowidth: 100%;.

    If it still appears, it may be because the width of the included element has penetrated.
    In that case,

    width: 100%;
    max-width: 100%;
    overflow: hidden;


    I think that most of the phenomena that can be pierced will be settled if it is added in three.

    Even in this case, it is recommended to identify and improve the elements that have already penetrated, as they will cause future anxiety.