Make menu full width of page

Hi I want to make my menu the full width of the page (it's in green at the moment) how would I do this? The CSS i have so far in my custom CSS is this:

#menu .ddsmoothmenu li {
float: none;
display: inline-block;
}
#menu {
text-align: center;
}

#menu .ddsmoothmenu li a {
color: #FFD302;
background: url(your image address) no-repeat right;
}
#menu .ddsmoothmenu li li a:hover {
background: #004D1B;
}
.menu_wrapper .menu-container {
background: #004D1B;
}
#menu .ddsmoothmenu li li a {
background: #004D1B;
}

#menu li a {
color: #FFD302;
}
#menu .ddsmoothmenu {
background: #004D1B!important;
}

#menu .ddsmoothmenu li {
float: none;
display: inline-block;
}
#menu {
text-align: center;
}

I don't think all of this is needed

Thanks

 

I also want to reduce the height of the menu

 

Hello,

Cloriato Theme already have the fullwidth menu bar.
Could you please explain your issue more clearly and specify it with the help of screenshot images.
And also share us your website link.