Make <html> fill entire screen-CodePudding

I dont know exactly where but my html tag is not taking up the entire screen (width wise) and i have an horizontal scrollbar. Moreover, my navigation bar is not filled ot the entire screen.

Moreover even if i remove the entire css, the gap and the horizontal bar is still there.

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}
body {
    position: relative;
    color: #555555;
    background-color: #FFFFFF;
    padding-bottom: 100px; /* Same height as footer */
}
}
.content-wrapper {
    width: 90%;
    margin: 0 auto;
}

main .featured {
    display: flex;
    flex-direction: column;
    background-image: url(imgs/featured-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
footer {
    position: absolute;
    bottom: 0;
    border-top: 1px solid #EEEEEE;
    padding: 10px 0;
    width: 100%;
}

/* nav bar */

.navbar-custom {
  background-color: #63BDA2;
  align : right;
}

.navbar-custom .navbar-brand{
  color: Black;
}

.navbar-nav li a {
   color: black;
   font-size: 15px;
 }

CodePudding user response：

I usually add margin and padding 0 to the * and the horizontal scroll disappears

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    ...
}

CodePudding user response：

Try adding this to your CSS:

html, body {
max-width: 100%;
overflow-x: hidden;
}