CSS Sprite

I am using the Travelify theme.
I created a css sprite using the CSS sprite generator at

I added the following code to styles.css:

#hover1 a {
    float: left;
    background: url('/wordpress/wp-content/uploads/2014/09/csg-541e190e3a14d.png') no-repeat top left;
    background-position: 0 0;
    width: 298px;
    height: 93px;

}

#hover1 a:hover {
    background-position: 0 -143px;
}

#hover2 a {
    float: right;
    background: url('/wordpress/wp-content/uploads/2014/09/legend.png') no-repeat top right;
    background-position: 0 0;
    width: 172px;
    height: 39px;

}

#hover2 a:hover {
    background-position: 0 -89px;

}

#hover3 a {
    float: right;
    background: url('/wordpress/wp-content/uploads/2014/09/news.png') no-repeat top right;
    background-position: 0 0;
    width: 172px;
    height: 39px;

}

#hover3 a:hover {
    background-position: 0 -89px;
}

#hover4 a {
    float: right;
    background: url('/wordpress/wp-content/uploads/2014/09/collodial_small.png') no-repeat top right;
    background-position: 0 0;
    width: 288px;
    height: 107px;

}

#hover4 a:hover {
    background-position: 0 -157px;
}

#hover5 a {
    float: right;
    background: url('/wordpress/wp-content/uploads/2014/09/greens_side_small.png') no-repeat top right;
    background-position: 0 0;
    width: 288px;
    height: 107px;

}

#hover5 a:hover {
    background-position: 0 -157px;
}

#hover6 a {
    float: right;
    background: url('/wordpress/wp-content/uploads/2014/09/inhalers_small.png') no-repeat top right;
    background-position: 0 0;
    width: 288px;
    height: 107px;

}

#hover6 a:hover {
    background-position: 0 -157px;

}

#hover7 a {
    float: right;
    background: url('/wordpress/wp-content/uploads/2014/09/salt_side_small.png') no-repeat top right;
    background-position: 0 0;
    width: 288px;
    height: 107px;

}

#hover7 a:hover {
    background-position: 0 -157px;
}'

and on the home page I added this code:

<div id=”hover1″></div>’

On the right sidebar, I added the following text:
‘<img align=”right” src=”../wordpress/wp-content/uploads/2014/09/cart.jpg” alt=”View the Cart” name=”cart” width=”172″ height=”39″ border=”0″ align=”top”>
<div id=”hover2″></div>
<div id=”hover3″></div>
<div id=”hover4″></div>
<div id=”hover5″></div>
<div id=”hover6″></div>
<div id=”hover7″></div>’

You’ll notice on the home page http://kokopelliswellness.com/wordpress/?page_id=436 that hover6, hover7 end up out of alignment, but the image size (and location of each sprite) is identical. Can someone please help me get this in alignment? Thanks.