HTML/CSS:
has not hundred percent width

Question

I want a div, which acts as a separator. It should have a hundred percent width. However, it doesn't align with the border of the browser.

What is wrong? I tested it with the latest firefox and chrome:

<div style="background-color: black;height:4px;display:block;"></div>
    
    <div><p>Content</p></div>
    
    <div style="height:20px;"></div>

I also tested the CSS-style "border" instead of background-color, but it has the same result.

[Duplicate](https://google.com/search?q=site%3Astackoverflow.com+html+css+div+does+not+have+100%25+width) of [Div not 100% width of browser](https://stackoverflow.com/q/19184691/4642212). — Sebastian Simon, Feb 08 '21 at 11:42
cannot replicate the issue. probably something is interfering with this sample — Lelio Faieta, Feb 08 '21 at 11:42
@LelioFaieta _“However, it doesn't align with the border of the browser.”_ — Does your browser have a body margin of 0 by default? — Sebastian Simon, Feb 08 '21 at 11:43
@SebastianSimon the div has a 100% width. The border of the browser can be 0 or the browser can add a margin to the body but he is asking for the width to be 100% and to fit the "border" without specifying which one. Also, since the body margin will cover the full page the div will be aligned with the content — Lelio Faieta, Feb 08 '21 at 11:45

score 0 · Accepted Answer · answered Feb 08 '21 at 11:43

0

Just remove the margin from the body:

body {
  margin: 0;
}

<div style="background-color: black; height: 4px; display: block;"></div>
<div><p>Content</p></div>
<div style="height: 20px;"></div>

Inline version:

<body style="margin: 0;">

answered Feb 08 '21 at 11:43

Tamas Szoke

1

Thank you, it never occurred to me that the browser has a default margin – User123456789 Feb 08 '21 at 12:30

score -2 · Answer 2 · answered Feb 08 '21 at 11:35

-2

give 100% width to body. it will fix the problem.

answered Feb 08 '21 at 11:35

2 Answers2