Search code examples
htmlcssmarginmaterialize

Limit for content - safe area

I'm trying to build a website. Seted a 1024px limit using:

body {
  width:1024px;
  margin:0 auto;
}

And my page looked like this:

But, actually, my page have to look like this:

You see? The nav bar?

What I have to do to my get my full navbar even with the width limits for the content?

Oh, I'm using materialize framework to make the website and, obviously, the nav-bar: http://materializecss.com/navbar.html

Solution

  • Don't give the body a set width!!!

    Because the body is set to 1024px every item within the body will start from it's edge... You should set the width on the elements within the body, which will allow you to have full control of the layout.

    Your header and navigation need to be full screen, so they should have a width of 100%.

    Items below the header can then be set and margins applied to fit your ideas.

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>my site</title>
</head>

<body>

<div class="set-width"></div>

</body>
</html>