CODEWITHSUNDEEP
htmlcss
Philx94
Philx94

Reputation: 1295

Div margin always off the right side of the page

I'm a coding a simple navbar component with 100% width and a margin, but no matter what I try it always seems to be way off the page on the right side of the screen. Any idea where the problem could come from?

I've tried to simplify things by creating a simple box within a div and giving it 16px margins, but I have the same problem. I was thinking maybe my CSS inherits from conflicting property of the body but after checking the inspector that doesn't seem to be the case.

Thanks for any insights!

//_navbar.scss

.box {
    position: absolute;
    width: 100%;
    background: black;
    margin: 16px;
}

// _navbar.html.erb

  <div class="box">
    Hello?
  </div>

Upvotes: 1

Views: 824

Answers (2)

Leonardo Viada
Leonardo Viada

Reputation: 413

By adding this body property to CSS you disable the automatic 8px margin that the body tag has. Try this new CSS stylesheet.

.box {
    position: absolute;
    background: black;
    margin: 16px;
    position: fixed;
    right: 0px;
    left: 0px;
}


body {
    margin: auto;
}

Upvotes: 0

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Because width: 100% PLUS margin: 16px is more than 100%.

Maybe you want to apply the margin to the body or whatever container is the parent of .box?

Upvotes: 1

Related Questions