horizontal scrollbar appears unless I set margin-right=15px

user_2696230 0
Viewed 243

I am getting a horizontal scrollbar; I don't need to set overflow-x to hidden as only one page might really still need the scrollbar. the point is that I don't understand why the scrollbar appear.

html {
    min-height: 100%;
    margin-left: 0px;
    margin-right: 0px;

    padding: 0px;
    font-size: 14px;
    font-family: 'itcmd' !important;
}

body {
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    
    background-color: #F3F3F3 !important;
    background-repeat: no-repeat;
}

as you see in some whitespace in red recatangle appear though there is nothing to show

enter image description here

the only way to avoid the scrollbar is by setting margin-right=15 in the css for html

html {
    min-height: 100%;
    margin-left: 0px;
    margin-right: 15px;

    padding: 0px;
    font-size: 14px;
    font-family: 'itcmd' !important;
}

why am I getting the scrollbar? is there a way to setup my css correctly to utilize the full width while avoiding scrollbar unless I need to

css html
2 Answers

Some of your content is taking more width than it should which is causing the scrollbar. Check if you have used negative margin. You can try adding overflow hidden on inner divs one by one using dev tools until you find the culprit. Or else share the complete code.

user_144097010

Can you try to add margin and padding 0 to both html and body

html, body{margin:0;padding:0;}
user_50890300
Related