After creating a fiddle to check for conflicts with other styles on my page, I ran into an issue with an inline list. There seems to be a slight drop in the middle item's positioning that I can't figure out. Despite trying various margin adjustments, including negative margins, nothing seems to bring it back up to its proper place. Any ideas on where this mysterious offset might be coming from?
<h2 style="text-align:center; margin: 0 auto; color: #CCC; font-size: 35px;">WHAT WE DO</h2>
<div style="width: 900px; margin: 0 auto;">
<ul style="width: 100%; margin: 0; padding: 0 0 0 0;">
<li style="width: 290px; display: inline-block;"><h3 style="color: #CCC;">OUR TEAM</h3>
<p style="color: #000; font-size: 17px; line-height: 27px; font-weight: 300;">Our team builds mobile, tablet and web-based applications designed to streamline processes, increasing profitability and employee engagement. Our primary goal is to change the way our clients work for the better.</p></li>
<li style="width: 290px; display: inline-block;"><h3 style="color: #CCC;">CLIENT EXPERIENCE</h3>
<p style="color: #000; font-size: 17px; line-height: 27px; font-weight: 300;">We aim to provide the best experience possible. Our clients remain informed and involved at every step of a project, up to delivery and beyond. We take pride in our service.</p></li>
<li style="width: 290px; display: inline-block; "><h3 style="color: #CCC;">BETTER BY DESIGN</h3>
<p style="color: #000; font-size: 17px; line-height: 27px; font-weight: 300;">Design and creative thinking are key parts of the service we offer. We take great care in how our software looks and operates, challenging every aspect from the perspective of both the business and its users.</p></li>
</ul>