Trying to style DT tag with class

I have a DL list:

<div id="wrapper">

<div id="middle">
<div id="left_nav">
<dl class="nav_list">
<dt><a href="../index.html">HOME</a></dt>
<dt class="center_bold"> &#9824;</dt>
<dd><a href="../Store/buy_pages/studio_del_red_oak.asp">Studio Series Racks</a></dd>
<dd><a href="../Store/buy_pages/session_del_red_oak.asp">Session Series Racks</a></dd>
<dd><a href="../Store/buy_pages/bandroom.asp">Band Room Rack</a></dd>
<dt>WALL RACKS</dt>
<dd><a href="../Store/buy_pages/profile.asp">Pro-File Wall Mount</a></dd>
<dt>ABOUT US</dt>
<dd><a href="../contact.html">Contact Us</a></dd>
<dd><a href="../testimonials.html">Testimonials</a></dd>
<dd><a href="../about.html">About Us</a></dd>
<dd><a href="../referral.html">Referral Program</a></dd>
<dd><a href="../affiliate.html">Affiliate Program</a></dd>
<dd><a href="../customer_photos.html">Customer Photos</a></dd>
<dt class="center_bold"> OTHER PRODUCTS</dt>
</div><!-- end #left_nav div-->

I am trying to style the “OUR RACKS” text so it is centered and larger in font size. I am using a class called .center_bold. It is working in that it centers this text but the font size will not increase. Can someone explain to me what’s going on here. Thanks
Here’s the css involved:

#left_nav {
margin: 0px;
width: 180px;
float: left;
height: 100%;
color: #311407;
min-height: 550px;
padding: 0px 5px 5px 10px;
font: bold 100% Arial, Helvetica, sans-serif;
#left_nav dl.nav_list {
width: 210px;
margin-left: -40px;
padding: 0px;
margin-top: 3px;
#left_nav dt {
padding-right: 0px;
padding-left: 40px;
padding-top: 6px;
font-size: 90%;
#left_nav dt a {
color: #311407;
#left_nav dt a:visited {
color: #311407;
#left_nav dt a:hover {
color: #DA830C;
text-decoration: none;
#left_nav dd {
font-size: 14px;
padding: 0px 0px 0px 6px;
#left_nav dd a {
color: #311407;
padding-left: 6px;
#left_nav dd a:visited {
color: #311407;
#left_nav dd a:hover {
color: #DA830C;
text-decoration: none;
.center_bold {
font-weight: bold;
text-align: center;
font-size: 200%;

You have a specificity problem.

#left_nav dt {font-size: 90&#37;} will take precedence over
.center_bold {font-size: 200%} since an ID selector is very specific.

Change the selector in the last rule to #left_nav .center_bold and you’ll be okay.

“you have a specificity problem”

Figured it was but couldn’t quite realize it