Extra menus disorientation

Good day,

I used the adding extra menu guide found here to add a top menu and a footer menu to my site with this code

add_action( 'init', 'register_extra_menus' );
function register_extra_menus() {
    if ( function_exists( 'register_nav_menus' ) ) {
        register_nav_menus( array(
            'my-top-menu' =>  'Top Menu',
            'my-footer-menu' =>  'Footer Menu'
        ) );
    }
}

// Hook display functions for each of them on theme elements:
add_action('__before_header', 'display_my_top_menu');
add_action('wp_footer', 'display_my_footer_menu');

// Display functions:
function display_my_top_menu() {
    echo ( has_nav_menu( 'my-top-menu' ) ? wp_nav_menu (
        array (
            'theme_location' => 'my-top-menu',
            'container_id'    => 'my-top-menu',
            'container_class'    => 'my-top-menu'
        )
    ).'
' : '' );
}
function display_my_footer_menu() {
    echo ( has_nav_menu( 'my-footer-menu' ) ? wp_nav_menu (
        array (
            'theme_location' => 'my-footer-menu',
            'container_id'    => 'my-footer-menu',
            'container_class'    => 'my-footer-menu'
        )
    ).'

It worked but all css styles I tried to apply did not work

such as this code

#top-menu ul { text-align: center; list-style-type: none;}
#top-menu ul li {display: inline-block; padding: 0 5px;}

any help?

my site is boyantech

thanks