I am facing an issue with Wordpress where my CSS file is not loading properly. The stylesheet contains a rule to center the header image, but for some reason it's not working. I've also tried adding a margin-left of 100px, but that doesn't seem to be applying either. Can anyone help me figure out what I'm doing wrong and suggest some solutions?
<head>
<title><?php echo $title; ?></title>
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
</head>
<body>
<center><img id="image" src="http://www.passionatemedia.ca/wp-content/uploads/2014/08/cropped-top-banner.jpg" width="950"/></center>
<center><img id="image" src="http://www.passionatemedia.ca/wp-content/uploads/2014/08/navigation.jpg" width="950" /></center>
<!-- end header -->
I have also added some CSS:
#image {
margin-left:500px;
display:block;
}
#headerImg {
margin-left:auto;
margin-right:auto;
}
Even after adding this new code, the issue persists. Here is the updated HTML/PHP:
<head>
<title><?php echo $title; ?></title>
<link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet">
</head>
<body>
<div id="headerImg">
<img src="<?php bloginfo('template_directory'); ?>/images/top-banner.jpg" width="950"/>
</div>
<!-- end header -->
And here is the corresponding CSS:
div.headerImg {
margin:0px;
margin-left:auto;
margin-right:auto;
width:950px;
}
If anyone has any suggestions or solutions, please let me know. Thank you!