[Theme: Frontier] menu nav bar change to horizontal display

I added code snippets to the child style.css to format the header and menu bar.

The header format worked, but the change to the nav bar did not work.

Website is https://www.matildafaltyn.com

The menu bar under the header is aligned vertically. I want it listed horizontally in a row like this: Home | About | Resources

What am I doing wrong? Here is the code in the style.css Editor pane, as it appears.

/*
Theme Name: Frontier-child
Template: frontier
Theme URI: https://ronangelo.com/frontier/
Description: Frontier is a ……blah blah blah….
Tags: ………  custom-header, ……., flexible-header, ….
*/
@import url("../frontier/style.css");
*/

#header {background-repeat: repeat;}   

#nav-main .nav-main {
    float: none;
    text-align: center;
    border-left: none;
    border-right: none;
}
#nav-main .nav-main li {
    float: none;
    display: inline-block;
}
*/

Why wont the menu bar titles display horizontally, and how do I change the font colour and weight.

thanks.