To view the issue live, please visit this link:
The "content" class (which is a container div) on my website has an uneven margin where the left side is larger than the right. Despite numerous attempts to troubleshoot in my CSS code, I am unable to identify the root cause of this discrepancy. It used to work perfectly fine not too long ago, but now it's misaligned.
Interestingly, when I remove the id Navbar or id Header divs, the Content div aligns back to the left as expected. This only adds to my confusion and frustration with the situation.
Here is the specific CSS code causing the issue:
.content{
display:inline-block;
margin:0 auto;
width: 68%;
overflow:hidden;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
font-size: 12px;
border-radius: 10px 10px 10px 10px;
}
For reference, here is a snippet of the HTML code:
<body>
<div class="header">
<p>Tucson Bagley</p>
</div>
<div id="socialmedia">
<a href="https://twitter.com/BagelHero"><img src="images/Twitter_logo_blue.png"/></a>
<a href="http://www.linkedin.com/in/tucsonbagley"><img src="images/linkedin.png"/></a>
<a href="https://www.facebook.com/tucson.bagley"><img src="images/facebook.png"/></a>
</div>
<div id="header">
<small><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c4e6d6b696044697e634c6b6560226f6361">[email protected]</a></small>
</div>
<div id="navbar">
<ul>
<li><a href="index.html"><span>Gallery</span></a></li>
<li><a href="about.html"><span>Resume/CV</span></a></li>
<li><span>Contact me</span></li>
</ul>
</div>
<div class="content">
<div class="thumbleft"><h2>This is some content.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non varius metus. Pellentesque eu nunc tortor. Aliquam id lectus orci. Sed id consectetur eros. Curabitur semper nisl nibh, rhoncus lacinia nibh volutpat at. Pellentesque sollicitudin vitae ipsum ut dictum. Proin ac risus ac nisi interdum hendrerit. Pellentesque sodales mauris ac eleifend vehicula. Nulla convallis aliquet urna varius auctor. Donec eget ipsum ut mauris consequat auctor eget sit amet odio. Nullam sed lorem erat. Praesent consequat porttitor magna, sit amet feugiat odio tincidunt ut. Fusce congue eros vel quam condimentum, vel consectetur quam imperdiet. </p>
</div>
</br>
<div id="copyright">
<p>Copyright 2012-2014 | Tucson Bagley</p>
</div>
</body>
I would appreciate any assistance in resolving this issue. Thank you in advance!