Can I also use the float property to style the nav unordered list? Or is float only applicable to certain elements?

Hi, I just tried experimenting with floats even in styling the nav unordered list. I targeted the nav li and it displayed the nav links side by side each other. The problem now though is that they were pushed down, so that they are now below the dark green box where they were initially contained in. Also they are not centered in the page. I tried to set a width of 100%, but what happened is that they will not be side by side each other anymore, and will just be on top of each other on the left side. So I scratched the width property. I hope my question is making sense. Thank you in advance. This is my code.

/************************* NAVIGATION *************************/

nav {

text-align: center;

padding: 10px 0;

margin: 20px 0 0;

}

nav li {

float:left;

margin: 2%;

padding:10px;

display:inline-block;

}