Have div cover entire width of the browser

Question

I am trying to have a background-color black div on my website, but for some reason, it does not extend across the entire width of the browser. I tried setting width: 100% but it only helped cover the right part of the website, and the left is still not covered.

If you run the code (I outlined the borders of the divs), you can see a gap between the red and green border on the left side.

HTML:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>
    <div id="blackrect"></div>
</body>
</html>

CSS:


html {
    border: 1px solid red;
    overflow: scroll;
    overflow-x: hidden;

}

body{
    border: 1px solid green;
    height:500px;
    width: 100%;

}

#blackrect{
    margin-top:50px;
    background-color: black;
    height: 200px;
    min-height: 200px;
}

score 0 · Answer 1 · answered Aug 24 '22 at 01:45

0

The answer was putting margin:0px; in the body css.

answered Aug 24 '22 at 01:45

hashfdfasf

31
3

score 0 · Accepted Answer · answered Aug 24 '22 at 01:47

Add margin: 0; to you body;

In cases like this, use your browser inspector to find out what is causing the problem.

html {
    border: 1px solid red;
    overflow: scroll;
    overflow-x: hidden;

}

body{
    border: 1px solid green;
    height: 500px;
    width: 100%;
    margin: 0;
}

#blackrect{
    margin-top:50px;
    background-color: black;
    height: 200px;
    min-height: 200px;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>
    <div id="blackrect"></div>
</body>
</html>

Have div cover entire width of the browser

2 Answers2