CSS - First Child Pseudo Element Not Working

Question

Any help would be appreciated here, not quite understanding why the seemingly simple code below won't work in CSS. I want to add a margin-left to the first i element.

Here's the CSS:

header.site-header .right_side_menu i:first-child {
    margin-left: 45px;
}

and my HTML:

<header id="masthead" class="site-header navbar-static-top <?php echo wp_bootstrap_starter_bg_class(); ?>" role="banner">
    <div class="container-fluid px-5">
        <div class="row">
            <div class="col-12 col-md-5 left_side_menu">
                <i class="fas fa-search"></i>
                <?php
                    wp_nav_menu(array(
                        'menu'            => '70',
                        'container'       => 'div',
                        'container_id'    => 'left-nav',
                        'menu_id'         => false,
                        'menu_class'      => 'navbar-nav',
                        'depth'           => 3,
                        'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                        'walker'          => new wp_bootstrap_navwalker()
                    ));
                ?>
            </div>
            <div class="col-12 col-md-2 logo_wrapper">
                <img src="" class="logo" alt="" />
            </div>
            <div class="col-12 col-md-5 right_side_menu">
                <?php
                    wp_nav_menu(array(
                        'menu'            => '71',
                        'container'       => 'div',
                        'container_id'    => 'right-nav',
                        'menu_id'         => false,
                        'menu_class'      => 'navbar-nav',
                        'depth'           => 3,
                        'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                        'walker'          => new wp_bootstrap_navwalker()
                    ));
                ?>
                <a href="" target="_blank" title="Click here for our Facebook page"><i class="fab fa-facebook-f"></i></a>
                <a href="" target="_blank" title="Click here for our Instagram page"><i class="fab fa-instagram"></i></a>
                <a href="" target="_blank" title="Click here for our Twitter page"><i class="fab fa-twitter"></i></a>
                <a href="" target="_blank" title="Click here for our Linkedin page"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
    </div>
</header><!-- #masthead -->

Thanks!

Answer 1

All your i elements inside .right_side_menu are first children, since they are (the first and only) children of their wrapping a elements. So you should change your selector to

header.site-header .right_side_menu a:first-child i {
    margin-left: 45px;
}

...to only affect the i inside the first a

Answer 2

Try a instead of i should work