I'm having trouble with this code in CSS and would appreciate any help. I can't figure out why the margin-left won't apply to the first i element.
Below is the CSS I'm using:
header.site-header .right_side_menu i:first-child {
margin-left: 45px;
}
And here's 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" style="margin-left: 45px;"></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 -->
Thank you!