Styling HTML element causes page width to be too large

Question

Final answers seem to have been editing .row's styles to be margin-right: 0 !important; and editing the body element's styles to be overflow-x: hidden; Thank you to everyone!

In my site, I style the html element with a background-color in order to fill the entire page. However, when doing so, the page width increases and causes it to be scrollable, horizontally. Is there anyway to fix this? The only framework I'm using is Bootstrap, and I've been trying to fix this for about a week.

Edit: Removing the background-color styling gets rid of the issue, but that's not really an option. Edit Two: Added all HTML in, as well as this screenshot:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>League Site</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="outer">
            <div class="row">
                <div class="col-lg-2"><h1>AnotherLOLSite</h1></div>
                <div class="col-lg-10"></div>
            </div>
            <div id="menu">
                <div class="row">
                    <div class="col-lg-2 menu-item"><h4>Home</h4></div>
                    <div class="col-lg-2 menu-item"><h4>Item DB</h4></div>
                    <div class="col-lg-2 menu-item"><h4>About</h4></div>
                    <div class="col-lg-6"></div>
                </div>
            </div>
            <div id="body" align="center">
                <form class="summoner-search" method="POST">
                    <input type="text" class="summoner-input" placeholder="Enter a summoner name...">
                    <button type="submit">GO!!!</button>
                </form>
            </div>
        </div>
    </body>
</html>

Relevant CSS

html {
    background-color: #081f44;
}

#outer {
    background-color: #081f44;
}

#menu {
    background-color: #000000;
}

.menu-item {

    color: gray;
}

.summoner-input {
    border-radius: 3px;
    width: 30em;
    height: 2em;
}

This is a good time to learn how to use your developer tools in your browser. Inspect the element and relevant css. Also, isolate the code out into the rendering engine here. — Ronnie Royston, Nov 30 '17 at 04:17

LoveHateDevelopment · Accepted Answer · 2017-11-30T20:34:16.943

2

You should be applying the color to body not html. It shouldn't be causing this issue, but still isn't best practice.

EDIT

The problem was in the class 'row' from the bootstrap framework. Just add the below into the stylesheet.

.row{
     margin-right:0!important;
 }

edited Nov 30 '17 at 20:34

answered Nov 30 '17 at 02:56

LoveHateDevelopment

224
2
9

What I have right there is the relevant code, and switching to body still still gives me the same issues. Along with using both HTML and body. However, removing the background-color styling from it gets rid of the scrollbar, and it continues to confuse me. – UghThatGUyAgain Nov 30 '17 at 02:58
I know thats the relevant code, but take a look at the below codepen. It only has the code you have supplied and there is no issue. Which makes me think it is caused by something else. https://codepen.io/anon/pen/EbOwNX – LoveHateDevelopment Nov 30 '17 at 03:00
All code has been added along with a screenshot of what I have. – UghThatGUyAgain Nov 30 '17 at 03:03
Add this to your stylesheet - .row { margin-right: 0!important; } It has to do with bootstrap, in particular the row class. As I said before, has to do with margin or padding :) – LoveHateDevelopment Nov 30 '17 at 03:13
You're a madman; It worked! I never even thought to fix specific sides of margins. Thank you! --If you want, add that to the answer and I'll upvote it for future people – UghThatGUyAgain Nov 30 '17 at 03:14
Thats cool. Just get used to using the developer console. I just used inspect to look at what was extending past everything else. Really helps. – LoveHateDevelopment Nov 30 '17 at 03:16

Erik · Answer 2 · 2017-11-30T03:02:35.547

1

why use background-color in html instead the body tag?

body{
 background-color:#081f44;
 min-height: 100vh; //Fill all the screen 
}

edited Nov 30 '17 at 03:02

answered Nov 30 '17 at 02:54

Erik

31
4

Because then the rest of the page isn't filled in. Some of the page (ie the menu, the title) is the color, but then the rest of the color is white. – UghThatGUyAgain Nov 30 '17 at 02:55
You can add body{ background-color:#081f44; min-height: 100vh; //100% of the viewport height } – Erik Nov 30 '17 at 02:57
Still doesn't appear to be working, I'm wondering if it might be something with my own monitor? – UghThatGUyAgain Nov 30 '17 at 03:03
Maybe bootstrap override the style, could you try inline css? ` ... ` – Erik Nov 30 '17 at 03:08
Doesn't appear to fix the issue, but I think you might be onto something here. Though, I may not be able to test the theory due to bootstrap being the foundation of it all, I feel like it's definitely overriding the style and making it not really,,, work. – UghThatGUyAgain Nov 30 '17 at 03:12
LoveHateDevelopment found a solution for fixing the margin-right's value, thank you though! – UghThatGUyAgain Nov 30 '17 at 03:15
rows in bootstrap has negative margin, you need to set margin:0 in your rows. look this example https://stackoverflow.com/questions/23153497/bootstrap-row-class-contains-margin-left-and-margin-right-which-creates-problems – Erik Nov 30 '17 at 03:26

Styling HTML element causes page width to be too large

2 Answers2