I can't work out what I'm doing differently on my header/menu

I am working on http://www.cacaocircles.com and struggling with the header/menu

I want it to be like the one I created at http://www.victoriawardhypnotherapy.com

So just the menu directly at the top, split around an icon/logo (added as a menu item).

But I’d like it on the green… not the black. I can’t find a way to change the black background!

Or to get rid of the redundant logo at the top.

I have copied across the Quick CSS that I used on the other site, but it doesn’t do the same..

Ideas?

So – outcome is: Menu at top, on a light green background (rather than the transparent of the other site), no logo space at top

Thanks!

.logo { display: none; }

nav.main_menu {
  left: 20%;
}

#top #header .av-main-nav > li > a {
    font-size: 20px!important;
}

.responsive .logo { display: none !important; }

#top .av-subnav-menu li a {
    font-weight: normal;
    font-size: 18px;
    padding: 0 30px;
}
#top .av-subnav-menu > li > a {
    border-left-width: 2px;
    border-color: black;
}