Make fill entire screen

Question

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;
 }

@SalikhGurgenidze unfortunately i can't use it becasue i want this to be adaptive — Sunshine Vasan, Oct 28 '21 at 12:24
@SecretTimes this is part of a huge project and i can't share the code due to security reasons — Sunshine Vasan, Oct 28 '21 at 12:25
You can still create a [minimal reproducable example](https://stackoverflow.com/help/minimal-reproducible-example) without sharing the secrets. The `[<>]` button can even make it interactive. — Peter Krebs, Oct 28 '21 at 12:27
Why can't you? The problem is that the navbar doesn't have 100% width. I don't need anything else. — SecretTimes, Oct 28 '21 at 12:33
`html { height: 100% }` has no influence at all. `height: 100%` means to fill up 100% of the parents height. The parent needs a defined width not a calculated one to fit content. `html` has no aprent and also the height will always be calculated to fit-content. You proberly want `min-height: 100vh` — tacoshy, Oct 28 '21 at 12:42
@tacoshy thank you. i have chnaged it but the problem rest unsolved — Sunshine Vasan, Oct 28 '21 at 12:49
then you should read the comments and provide a [repro] that includes your HTML for debugging details. So far, we only can guess. — tacoshy, Oct 28 '21 at 12:52
Dupe of [Make fill entire screen?](https://stackoverflow.com/q/5721904/215552) — Heretic Monkey, Oct 28 '21 at 13:00
you have a typo syntax error -> `} }` if you have perhaps made a correction, here it is imaginary! — Mister Jojo, Oct 28 '21 at 17:31
Welcome to SO. You might find reading the site [help section](https://stackoverflow.com/help) useful when it comes to [asking a good question](https://stackoverflow.com/help/how-to-ask). To get the best answers to your question we like to see that you've attempted to solve the problem yourself first using a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Here's a [question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) you might find useful... — Mister Jojo, Oct 28 '21 at 17:31

score -1 · Answer 1 · answered Oct 28 '21 at 12:44

-1

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

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

answered Oct 28 '21 at 12:44

Lucas Gazzola

1

i tried but doesn't work – Sunshine Vasan Oct 28 '21 at 12:47
a global reset also is not adviced. YOu should only remove the margin and paddings of the elements youa ctually want to reset. easier then to re-add them individually for every element later on. – tacoshy Oct 28 '21 at 12:50

score -1 · Answer 2 · edited Oct 28 '21 at 18:05

-1

Try adding this to your CSS:

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

edited Oct 28 '21 at 18:05

Giorgio Tempesta

1,816
24
32

answered Oct 28 '21 at 12:59

Milad Khoshdel

16
4

then you dont have a scrollbar, but you just hidding the overflow not fixing the actual issue that causes it. Also note that `max-width: 100%;` has no influence on both body and html. both have a calculated width to fit-content by default and no direct parent with a defined width – tacoshy Oct 28 '21 at 13:05

Make fill entire screen

2 Answers2