Unknown CSS need help identifying please

Hi everyone,

I am a newb, plain and simple… I am learning to use wordpress from the ground up. I have intermediate html, beginner CSS and beginner php knowledge and as such I need help.

I am using the developer tools (in chrome) to decipher a theme that I bought.

I am changing the main nav bar to have different color buttons, which I have done by using my own custom style.css in the child theme I have created. They now work fine.. However…

Since adding my own style, they no longer fill 100% width of the screen (which is strange in itself, as all I have really done is change thier color and hover color.. go figure)

I have 9 buttons, so a width of 11% seemed sensible. But this only extended them 3/4 of the way across the nav bar.

On examination I have found the nav bar to be in a:

div class=”menu-main-nav-menu-container”

Ok, so far…

Then underneath this is this code..

ul id=”menu-main-nav-menu” class=”sf-menu sf-js-enabled sf-shadow”><li id=”menu-item-1831″ class=”icon-home no-text menu-item menu-item-type-post_type menu-item-object-page menu-item-1831″>Home

obviously this continues with each menu item (code taken straight from googles developer/edit as html)

This is what I need help with. I am not sure what I am looking at. What I DO KNOW, is that this piece of code makes a kind of ‘wrapper’ around the entire Nav bar and restricts it to 750px (my site is 960) and the width 11% that I tried only fills this 750px rather than 100%

So what I would like to know (apologies for the long winded post) is how to CHANGE the width of that ‘wrapper’ so my buttons can indeed be 11% of the width each.

Thank you folks for your help.

Art.