First I think you are tackling your logo wrong, by that I mean your logic. Why don't you do something like the following:
Example of CSS Code
Code:
body {
font-size: 76%;
background-color: #f9f9f9;
padding: 0px;
margin: 0px;
}
#wrapper {
overflow: hidden;
width:1200px;
padding: 0px;
margin: 0px auto 0px auto;
}
#header {
float: left;
width: 1200px;
height: 100px;
background-image: url(../images/img-example.png);
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
}
#company-logo {
float: left;
width: 100px;
height: 50px;
position: relative;
top: 20px;
left: 500px;
....style in the way you want it to look on page
}
Then the HTML code might look like something like the following:
Code:
<body>
<div id="wrapper">
<div id="header">
<h1 class="company-title">The Best Darn Website Example</h1>
<div id="company-logo">
<a href="index.html" target="_self"><img src="images/img-michigan-map.png" alt="Map of Michigan" /></a>
</div><!--/#company-logo-->
</div><!--/#header-->
.......continue with code
</div><!--/#wrapper-->
</body>
I was taught to put everything in logical order when writing my html/css code, here is a small css example
Code:
header {
float: left;
width: 800px;
height: 600px;
background-image: url(../images/img-header.jpg);
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
}
Try to put padding and margins set to zero for all you major blocks of css code, such as header, section, article, footer, etc.. that way when you set your width and height you can adjust your padding and margin accordingly. I hope this helps a little.