Why doesn't a header respond to code to overwrite styling?

I have a bit of code in this in-development page. It is the Graphic Design column in the footer. This should display like its neighbors (About Us, Web Design, etc.) but no amount of css, including !important will budge it.

Here is the html:

<div class="sub-nav">
     <h开发者_开发知识库5 class="graphic"><a href="#">Graphic Design</a></h5>
     <h5 class="graphic"><a href="#">Business Development</a></h5>
     <h5 class="graphic" ><a href="#">Our Blog</a></h5>
     <h5 class="graphic"><a href="#">Contact Us</a></h5>
</div>

Here is the CSS:

.sub-nav h5.graphic a:link, .sub-nav h5.graphic a:visited    { padding-bottom: 10px !important; color: #22a9e0; border-bottom: none; font-size: 14px : }
.sub-nav h5.graphic a:hover, .sub-nav h5.graphic a:active        { font-size: 14px !important; border-bottom: none; }

I want all the h5s in the Graphic design column to look just like the headers next door. I would really appreciate some help getting this wayward section to comply.

Thanks!

Your problem is that you already have an h5 style declared in the CSS, this will not be overwritten, no matter what, it seems.

I would just use a <span> or an <li> like you have "next door", as these aren't headings of any nature :)

If you use FireBug you can see rest all columns are using <ul> to show the selected options. <h5> is used only for main caption. Do that and should fix your problem.