Currently I'm having issues with my menu bar - it seems there's a border around the page names so these tabs are not sitting flush with the background.

See here: http://cswphotography.com.au/blog.

How do I get my menu items sitting neatly?

Secondly, the items seem really bunched up. How do I get the width of the menu bar items to have some padding either side of the text?

Third thing, I want my menu to look like this menu: http://www.foxpitteventing.co.uk/ any thoughts on how?

Thanks heaps.

go to ato->MENU 1 (Page Menu)->Border around all menu items and set it to solid 1px and what ever color you are using

I ended up fixing the first issue through the %bar1 and %bar2 styling:

height: 1px;
background: #000000;
border-top: solid 1px #fc9d08;

height: 1px;
background: #000000;
border-bottom: solid 1px #fc9d08;

Any help on getting the width of the page items wider? Like how you can set the sub menu items to a certain width?

To get more spacing between the Page Menu Items play around with the following...

In the ATO --> Add HTML/CSS Inserts add the following....

div#menu1 ul.rMenu li {
        margin: -1px 10px;
}

I'll have to poke around a bit to get the submenu width settings...

Cool. That worked. But now the child menu has a clear 20px coming off, like the 20px I added to the parent menu. How do I change the padding on the child menu back to 0px?

(hover over For Sale and you'll see what I mean if my writing is confusing)