This is a snippet of my HTML and CSS code that I'm working on:
<header id="main">
<a href="#" id="exit"></a>
<a href="http://www.reddit.com/" id="reddit"></a>
<a href="http://www.stackoverflow.com/" id="stackoverflow"></a>
<a href="http://www.facebook.com/" id="facebook"></a>
<a href="#" id="title"></a>
</header>
And here is the corresponding CSS to style this section:
#main{
height: 220px;
width: auto;
border: 2px #000000 solid;
}
#title{
float: left;
background: url(title.jpg) no-repeat;
padding: 90px 145px;
margin: 20px auto;
border: 2px #000000 solid;
}
I added borders to both ID elements for clarity. However, I am puzzled as to why the title image is not centered as intended. Here's how it looks based on the code provided above:
If you'd like to check out the live example, you can view it on JSFiddle: http://jsfiddle.net/5nWag/2/