Having a div with the usual margin: 0 auto and text align: center, I noticed that the first letter of the text/image is centered within the div, not the image itself. Additionally, there seems to be a slight misalignment in the rest of the content by a few pixels, but it's hard to pinpoint exactly.
The relevant CSS code is as follows:
#wrapper {
max-width: 900px;
min-width: 500px;
width: 100%;
margin: 0 auto;
display: block;
}
#container {
width: 100%;
margin: 0 auto;
position: relative;
padding: 0;
text-align: center;
}
#main {
width: 100%;
margin: 0 auto;
float: left;
}
/* nav style */
#header, #footer, .pagination {
margin: 0 auto;
width: 100%;
padding: 20px;
left: 0;
right: 0;
text-align: center;
float: left;
}
#menu-nav {
margin: 0 auto;
width: 100%;
border-bottom: 1px solid;
float: left;
position: relative;
}
#menu-nav li, #footer li, .pagination li {
padding: 20px;
list-style: none;
display: inline-block;
text-align: center;
}
#menu-nav a {
display: block;
}
#menu-nav a, #menu-nav a:visited, #footer a, #footer a:visited, .pagination a, pagination a:visited, a, a:visited {
text-decoration: none;
}
/* end nav style */
/* element styling */
h1 a {
text-decoration: none;
margin: 0 auto;
text-align: center;
padding-bottom: 15px;
}
#header {
text-align: center;
margin-top: 8px;
width: 100%;
}
#header a {
/*float: left; - uncomment to align logo with intro text */
margin: 0 auto;
}
#header img {
max-width: 150px;
margin: auto;
}
#intro {
width: 35%;
margin: 0 auto;
text-align: left;
padding-top: 30px;
padding-bottom: 50px;
}
Here's the relevant HTML snippet:
<div id = "wrapper">
<div id = "container">
<div id = "header">
<?php if ( get_theme_mod( 'logo-upload' ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo get_theme_mod( 'logo-upload' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
<?php else : ?>
<h1><a href = "index.php"><?php echo get_theme_mod('title_textbox', 'Suburbia'); ?></a></h1>
<?php endif; ?>
<?php wp_nav_menu( array( 'Nav' => 'Nav' ) ); ?>
</div>
</div>
</div>