How can I make my flex-box buttons hover? - css

Question

I have a flex box with several different buttons, namely, "Shop My Look," social icons, and a comment icon. I'd like them to hover to backgound-color: #ffff; (font) color: #f37761; and border color: #f37761. Applying the :hover doesn't do anything. Any thoughts?
You can find my issue on here: www.rachelclayton.co. It's on the homepage under each post in the post-meta area.
/* HTML */
<?php if(!is_single()) : ?>
<div class="read-more">
<?php esc_html_e( 'Continue Reading', 'alder' ); ?> <i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<div class="shop-social">
<div class="shop-my-look">
<?php esc_html_e( 'Shop My Look', 'alder' ); ?>
</div>
<?php if(!get_theme_mod('alder_post_share')) : ?>
<div class="post-share">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"><i class="fa fa-facebook"></i></a>
<a target="_blank" href="https://twitter.com/intent/tweet?text=Check%20out%20this%20article:%20<?php print alder_social_title( get_the_title() ); ?>&url=<?php echo urlencode(the_permalink()); ?><?php if(get_theme_mod('alder_twitter')) : ?>&via=<?php echo esc_html(get_theme_mod('alder_twitter')); ?><?php endif; ?>"><i class="fa fa-twitter"></i></a>
<?php $pin_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID)); ?>
<a data-pin-do="none" target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php echo urlencode(the_permalink()); ?>&media=<?php echo esc_url($pin_image); ?>&description=<?php print alder_social_title( get_the_title() ); ?>"><i class="fa fa-pinterest"></i></a>
</div>
<?php endif; ?>
<?php if(!get_theme_mod('alder_post_comment_link')) : ?>
<div class="meta-comment">
<i class="fa fa-comment"></i>
</div>
<?php endif; ?>
</div>
<?php else : ?>
<?php if(!get_theme_mod('alder_post_share_author')) : ?>
<div class="meta-author">
<?php echo get_avatar( get_the_author_meta('email'), '60' ); ?><span class="by"><?php esc_html_e( 'by', 'alder' ); ?></span> <span class="vcard author"><span class="fn"><?php the_author_posts_link(); ?></span></span>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php if(!get_theme_mod('alder_post_related')) : ?>
<?php if(is_single()) : ?>
<?php get_template_part('inc/templates/post-related'); ?>
<?php endif; ?>
<?php endif; ?>
<?php comments_template( '', true ); ?>
<?php if(!get_theme_mod('alder_post_pagination_hide')) : ?>
<?php if(is_single()) : ?>
<?php get_template_part('inc/templates/post-pagination'); ?>
<?php endif; ?>
<?php endif; ?>
</article>
</div>
/* CSS */
}
.post-meta .shop-social {
display: flex;
clear: both;
}
.post-meta .shop-social .post-share a,
.post-meta .shop-social .meta-comment a {
margin-left: 10px;
}
.post-meta .shop-social .shop-my-look,
.post-meta .shop-social .post-share,
.post-meta .shop-social .meta-comment {
display: contents;
}
.post-meta .shop-social .shop-my-look a {
flex-grow: 3;
}
.post-meta .shop-social a {
background: #ffff;
border: 1px solid #dfdfdf;
color: #2e2e2e;
display: block;
font-size: 11.5px;
font-weight: 400;
height: 40px;
letter-spacing: 2px;
line-height: 40px;
width: 4em;
padding: 0 18px;
text-align: center;
text-transform: uppercase;
}
.post-meta .shop-my-look a {
font-size: 11px;
}
.post-meta .shop-social: hover {
background: #ffff;
border: 1px solid #eee;
color: #f37761;
}

Answer 1

In your CSS you have a space between the : and hover. This would cause the hover not to work.

Answer 2

I added hover through console and it works fine
.shop-my-look a:hover {
backgound-color: #ffff;
color: #f37761;
border color: #f37761.
}