Problem with positioning of the menu in custom WP style

Question

I have created a style with fully functional menu in the header. The header ends with the border-bottom.

When I add following lines to style.css to change the menu appearance:

.site-nav ul li {
    list-style: none;
    float: left;
}

then the menu changes its position below the border-bottom of the header.

I do not understand, I follow strictly the guide on https://www.youtube.com/watch?annotation_id=annotation_4149774805&feature=iv&index=4&list=PLpcSpRrAaOaqMA4RdhSnnNcaqOVpX7qi5&src_vid=k7olvEeBM2I&v=AShql_Ap1Yo

Thank you.

Answer 1

Try using display instead of float:

.site-nav ul li {
    list-style: none;
    display: inline;
}