CODEWITHSUNDEEP
htmlcss
Ojonugwa Jude Ochalifu
Ojonugwa Jude Ochalifu

Reputation: 27237

Make div span the entire width of the screen

Am trying to work with the div tag but it comes out like this:

enter image description here

On the left, you can see that it doesn't reach as far as the right.I have tried it in four different browsers so this isn't a browser problem.

This is the html code:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@page_title</title>
    <style>
        div {border: 3px solid black; width: 120%; margin: 1.2em; padding: 2em}
    </style>
</head>
<body>
    <div class="div">
        <h1>@page_title</h1>

    </div>
</body>
</html>

Upvotes: 1

Views: 7061

Answers (2)

Faust
Faust

Reputation: 15394

Margin tells the element how far it should be kept away from its neighboring elements and (in most cases) its parent.

So margin: 1.2em is pushing the div off from the left edge by this amount. First, remove that

Second: if you want a div to span the width of its container (in this case the body), then use width:auto. This will make its width be equal to the parents width, taking account of any margin or padding that are on the elements.

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50149

You're setting width to 120%? A block-level element is 100% of the parent by default so you don't need to change the width.

Demo

HTML

<div>
  <h1>@page_title</h1>
</div>

CSS

div {
    padding: 2em;
    margin: 2em;
    border: 3px solid black;
}

Upvotes: 4

Related Questions