background image in header

I have a background image in the header with the navigation below it. My problem is that the image repeats in the navigation bar because the class .container is in both. This is my code:
#header-inner-bg .container{
background-image: url(http://localhost:8888/wp-content/uploads/SPTheaderbg2.png)!important;
background-position: center center!important;
background-repeat: no-repeat!important;
background-size: cover;
}

How can I solve this? Do I need to edit the page template to change one of the container IDs and if so where is it?