Need Help With Positiong EZ Pages Bar - Please!

I am spending hours upon hours trying to figure out how to position the EZPages the way that I want.

I want the links/pages to look like they do here:

mycupcoffee.com.

The links are inside of the header/banner.

When I look at the CSS, it looks like I need to style this:

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

But when I change the margins or padding the whole page moves. I only want the EZ pages to move. Can someone please help me!!!???

I am using the Classic Green Template

A link to your site will make it easier for us to help you.
These are the rules that apply directly to MyCupCoffee's ez-page navbar container:```
#navMain{
/border:1px solid green;/
margin-top:20px;
margin-left:185px;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;
font-weight: bold;
}

They have moved navEZPagesTop inside of navMain and as gjh42 listed then used css to style it.

This move is accomplished in a copy of tpl_header.php

Thank you guys. I will try some of these things and post back. :D

Note - you don't necessarily have to move divs around in your header; you can simply apply some or all of the CSS above to #navEZPagesTop etc. instead of #navMain etc. This depends on exactly what results you want. I presume you are not intending to copy the other site in every single detail.

Also, you probably don't want to style #navSupp ul, #navCatTabs ul the same way, so leave them out of your new code.

This is so annoying!! Why did the developers group all of these things together. I am pulling my hair out trying to figure out to position this thing.

Un-grouping selectors is very simple - just copy the whole rule, and delete the desired selector from the original and all the other selectors from the copy.
Then change the copy as desired.```
#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
}
#navMain ul  {
	margin: 1em;
	padding:  0.5em 0.7em;
	list-style-type: none;
	text-align: left;
	line-height: 2.0em;
}
```I agree that there are many selector groups that would be better rearranged.