1

For some reason my fixed div at the top of my website decided to ignore my wrapper and go the right.

This is the CSS code of both my fixed div and my wrapper:

div.colorChanger {
background-color: #0f4a1d;
padding: 0.5%;
position: fixed;
width: 100%;
z-index: 1;}

#wrapper {
width: 1000px;
margin: -10px auto;
background-color: #78ad00;}

And here's what it looks like.

Psicho
  • 33
  • 7

1 Answers1

2

Ok, looks like your.colorChanger is overflowing outside your wrapper. Just use overflow: hidden.

Here's what that CSS would look like:

#wrapper {
  width:1000px;
  margin: -10px auto;
  background-color: #78ad00;
  overflow:hidden; }

EDIT: Fixed position

I noticed you're using a position: fixed on the .colorChanger. Overflow doesn't apply to elements with a fixed position, so maybe you could just change it to position: absolute instead.

Your code should look like:

div.colorChanger {
  background-color: #0f4a1d;
  padding: 0.5%;
  position: absolute; // not 'fixed'
  width: 100%;
  z-index: 1;}

#wrapper {
  width: 1000px;
  margin: -10px auto;
  background-color: #78ad00;
  position: relative;
  overflow: hidden; }

An alternative, fixed width

Like I said, overflow: hidden doesn't apply to fixed elements. The alternative is to just use fixed width:

div.colorChanger {
  ...
  width: 1000px;
  box-sizing: border-box; }
Community
  • 1
  • 1
FloatingRock
  • 6,741
  • 6
  • 42
  • 75