Spry Menu Background Stops After Text

Question

I made a Spry Vertical Menu in DCS4. When I look at it in the browser, the background only extends the length of text...I want it to extend across the box equally for all the menu choices. I have looked at all the CSS properties and changed the values, but nothing seems to affect the length of the backgrounds. Can you offer any suggestions? You can see the page at http://www.stepbystepcare.org/index4.html

Answer 1

1. Resurrect the original SpryMenuBarHorizontal.css, too many irregularities in the modified one.
2. remove line 18-20 from the main document
3. add a closing UL-tag to line 83 main document
4. Then add the following to the bottom of the original SpryMenuBarHorizontal.css
ul.MenuBarHorizontal {
    width: 940px;
    margin: auto;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
ul.MenuBarHorizontal li {
    width: auto;
ul.MenuBarHorizontal ul {
    width: auto;
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
ul.MenuBarHorizontal a {
    color: #B5B5B5;
    text-transform: uppercase;
    padding: 1.1em 3em 1.1em 1.5em;
    background: url(../images/img03.gif) repeat-x -100px;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
    background-color: transparent;
    color: #FFF;
ul.MenuBarHorizontal li.MenuBarItemIE {
    background: url(../images/img03.gif) repeat-x -100px;