HTML/CSS: Content growing larger than 960 grid - html

Question

I am using the 960 Grid System and the container_16 format. For some reason one of my containers is slightly bigger than the rest. This is killing my feng shui.
I have highlighted the error here:
A live preview can be seen at http://rcnhca.org.uk/sites/first_steps/, Notice how the breadcrumbs at the very top go further right than any other element by a few pixels?
The guilty element has the following the markup:
<div class="container_16">
<div class="grid_16" id="breadcrumbs">
<ul id="parent" class="grid_15 omega">
<li>Select a topic<ul class="child"><li>Getting started</li><li>Communication</li><li>Health, Safety and Security</li><li>Personal and people development </li><li>Quality</li><li>Equality, diversity and rights </li><li>Clinical skills</li><li>Additional material</li></ul></li> </ul>
</div>
<div id="supplements" class="grid_16">
<div class="left">
<img src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/book-icon.png" alt="book icon">View competencies checklist
</div>
<div class="right">
<img src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/rcn-icon.png" alt="rcn icon">Join the RCN
Reasons to joins
</div>
</div>
</div>
and it's CSS:
#breadcrumbs {
display: block;
position: relative;
z-index: 4;
height: 39px;
padding-bottom: 3px;
background: #ffffff;
border: 0px solid;
border-left: #3a90a7 2px solid;
border-right: #3a90a7 2px solid;
border-bottom: #3a90a7 2px solid;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#breadcrumbs ul {
list-style: none;
list-style-image: none;
margin: 0;
}
#breadcrumbs #home{
display: block;
height: 39px;
width: 60px;
float: left;
background-image: url(library/images/home_icon.png);
background-repeat: no-repeat;
background-position: 19px center;
text-indent: -999em;
}
#breadcrumbs ul#parent {
display: block;
height: 39px;
float: right;
right: 3px;
position: relative;
background: #f38630;
-webkit-box-shadow: inset 0px -2px 0px 0px #cf7229;
-moz-box-shadow: inset 0px -2px 0px 0px #cf7229;
box-shadow: inset 0px -2px 0px 0px #cf7229;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#breadcrumbs ul#parent li {
position: relative;
height: 39px;
float: left;
min-width: 1px; /* required to fix Opera bug */
padding: 0 47px 0 15px;
background-image: url(library/images/breadcrumb_seperator.png);
background-repeat: no-repeat;
background-position: right;
line-height: 39px;
zoom: 1;
}
#breadcrumbs ul#parent li a {
display: block;
height: 42px;
position: relative;
font-size: 15px;
font-weight:900;
color: #ffffff;
text-decoration: none;
text-shadow: 0px 2px 0px #cf7229;
}
#breadcrumbs ul li a:visited {
color: #ffffff;
}
#breadcrumbs ul#parent li:first-child ul {
left: -5px;
}
#breadcrumbs ul#parent li ul {
position: absolute;
z-index: 9998;
left: -28px;
top: 42px;
background: #ffffff;
border-left: #3a90a7 2px solid;
border-right: #3a90a7 2px solid;
border-bottom: #3a90a7 2px solid;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 0 3px 0 3px;
list-style-position: outside;
min-width: 200px;
width: auto;
-webkit-box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
}
.js #breadcrumbs ul#parent li ul {
display:none;
}
.no-js #breadcrumbs ul#parent li ul {
left: -999em;
}
#breadcrumbs ul#parent li ul li {
float: none;
display: block;
position: relative;
height: 26px;
margin-bottom: 3px;
padding: 0 15px;
background-image: url(library/images/arrow-icon.png);
background-position: -25px 50%;
background-repeat: no-repeat;
background-color: #738793;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
line-height: 26px;
white-space: nowrap;
zoom: 1;
}
#breadcrumbs ul#parent li ul li a{
display: block;
width: auto;
color: #ffffff;
text-decoration: none;
text-shadow: none;
font-weight: 100;
}
#breadcrumbs ul#parent li ul li.active, #breadcrumbs ul#parent li ul li:hover{
background-color: #3393b5;
}
#breadcrumbs ul#parent li ul li.active, .no-js #breadcrumbs ul#parent li ul li:hover{
background-position: 0px 50%;
text-indent: 10px;
}
.no-js #breadcrumbs ul#parent li:hover ul, .no-js #breadcrumbs ul#parent li:focus ul {
left: -5px;
}
Can anyone help me whip it into shape?

Answer 1

It's because you have given #breadcrumbs an extra 4px width with the border.
border-left: #3a90a7 2px solid;
border-right: #3a90a7 2px solid;`.
The grid_16 is actually 944px instead of the intended 940px, hence the discrepancy.
You'll need to readjust your markup though.
<div class="grid_16">
<div id="breadcrumbs">
<!-- etc -->
</div>
</div>
You will also have to resize your home button. Give it a class of grid_1 alpha and remove the width:54px from your CSS. should be good to go