Why is my header not in the center? [closed] - css

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 8 years ago.
Improve this question
Here's a link:
http://www.cultsectsclothing.com/shop
Can someone please help me? I can't figure out why the header won't center. Instead, it's awkwardly all the way to the right. I feel like it's something really simple but I don't even know...
I have already tried redoing the header on css and in the html cascade layout. It's the same way I do the header on all the other pages. I just need the stupid title to center and for some odd reason it is not.
I checked my tags and made sure they matched up with my 's too. Help??

Answer 1

Give CSS Like this for #header and it will Work No Doubt !
#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
width: 100%;
min-height: 30px;
display: inline-block;
text-align: center;
margin: 0 auto;
}

Answer 2

You can use it for your header:
#header {
width:980px;
height:130px;
margin:0 auto;
}

Answer 3

Instead of
width: 1000px;
Put
width: 100%;
on the #header CSS style.
It will look like this: http://d.pr/i/2OKD
And the fixed will be still there, so, your "logo" will not scroll (like the menu).

Answer 4

try this
#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
width: 100%;
min-height: 30px;
display: inline-block;
text-align: center;
margin: 0 auto;
}

Answer 5

Demo JsFiddle
Add margin: 0 auto; in your #header. This will solve your problem..
HTML
<div id="header">CULT SECTS</div>
CSS
#header {
font-size: 60px;
font-style:oblique;
font-weight:bold;
color: #000;
text-align: center;
margin 0 auto;
width: 100%;
min-height: 30px;
display: inline-block;
}

Answer 6

In context to your code, you simply need to add two properties to your #header rule, which are left: 0 and width: 100% (remove your 1000px as I'm assuming you just want the header to be centered and don't care about an exact width)
See the last 2 properties in the code block below:
#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
min-height: 30px;
display: inline-block;
text-align: center;
left: 0;
width: 100%;
}
http://jsfiddle.net/uberrobert/F4TgR/
This will make your header come back from the right as I see that behavior in Firefox :)