CSS works fine in the local test but breaks on my Drupal site.

CSS works fine in the local test but breaks on my Drupal site.

Can anyone tell me how to fix this bug? The CSS below works just fine as a local test but as soon as I put it into Drupal it looses the middle section any ideas?

The CSS::

/* Profile Banners 
===================================*/
.pro_title h3 {
background-image:url(/files/pro/middle.gif);
background-repeat:repeat-x;
font-size:24px;
height:56px;
left:0;
margin:0 24px 0 0;
overflow:hidden;
padding:15px 10px 0 70px;
}

.pro_icon {
background-repeat:no-repeat;
height:56px;
margin:0;
position:relative;
bottom:46px;
width:56px;
z-index:3;
}

.pro_title {
background-image:url(/files/pro/end.gif);
background-position:right center;
background-repeat:no-repeat;
height:56px;
left:0px;
margin:0;
padding:0;
position:relative;
right:30px;
top:10px;
}

.pro_me {
background-image:url(/files/pro/me.png);
}

.pro_time {
background-image:url(/files/pro/star.png);
}

.pro_worked {
background-image:url(/files/pro/map.png);
}

.pro_forum {
background-image:url(/files/pro/forum.png);
}

.pro_about {
background-image:url(/files/pro/box.png);
}

.pro_interest {
background-image:url(/files/pro/cog.png);
}

.pro_other {
background-image:url(/files/pro/globe.png);
}

.pro_buddies {
background-image:url(/files/pro/buddies.png);
}

.pro_photo {
background-image:url(/files/pro/photos.png);
}

/* Profile Banners Ends
===================================*/

The HTML used to make the test Page::

<div class="pro_title">
<h3>name</h3>
</div>
<div class="pro_icon pro_me"></div>


<div class="pro_title">
<h3>time</h3>
</div>
<div class="pro_icon pro_time"></div>


<div class="pro_title">
<h3>worked</h3>
</div>
<div class="pro_icon pro_worked"></div>

<div class="pro_title">
<h3>forum</h3>
</div>
<div class="pro_icon pro_forum"></div>


<div class="pro_title">
<h3>about</h3>
</div>
<div class="pro_icon pro_about"></div>


<div class="pro_title">
<h3>interest</h3>
</div>
<div class="pro_icon pro_interest"></div>

<div class="pro_title">
<h3>places</h3>
</div>
<div class="pro_icon pro_other"></div>


<div class="pro_title">
<h3>buddies</h3>
</div>
<div class="pro_icon pro_buddies"></div>


<div class="pro_title">
<h3>photos</h3>
</div>
<div class="pro_icon pro_photo"></div>