Have <body> div cover entire width of the browser-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

You just need a CSS reset some of the browser defaults can be interesting:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./home.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="blackrect"></div>
  </body>
</html>

reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}