body tag is overflowing , not fitting with container-CodePudding

My html,body, wrapper width is 100%. When I test this with responsive mode , Inside wrapper every element is well fit and responsive . But the width of body and wrapper is not same. At the right side theres 40px extra space creating . I have checked every block,element layout by giving border color. All block are fits inside the wrapper but the html and body not fitting with the same width of wrapper. I tried to prevent this with overflow-x: hidden but nothing has changed.

html,body{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Varela Round",Sans-serif;
    font-size:1.125rem;
    height: auto;
    overflow-x:hidden;
}
.wrapper{
    width:100%;
    max-width:1348px;
    overflow-x:hidden;
}

CodePudding user response：

You must use viewport height in body

body{
height: 100vh;
width: 100vw;
}

and in your wrapper:

.wrapper{
    width:100%;
    max-width:1348px;
    overflow-x:hidden;
}