Trouble Styling Menu…

Hi,

Having a really frustrating time. Working remotely for a company on a new home page redesign.

1 – Using Gutenberg on a page with a child theme of Customify
2 – The area I am trying to add a menu is the right column of a two column block.
3 – In that right column, I am a Custom HTML block.

My block looks like this:

<div class="wp-block-column is-vertically-aligned-top">
<div class="wp-block-group">
<div class="wp-block-group__inner-container">
<div class="menu-parent-div">

<div class="menu-link-div"><a href="#">Link 1</a></div>

<div class="menu-link-div"><a href="#">Link 2</a></div>

<div class="menu-link-div"><a href="#">Link 3</a></div>

<div class="menu-link-div"><a href="#">Link 4</a></div>

<div class="menu-link-div"><a href="#">Link 5</a></div>

<div class="menu-link-div"><a href="#">Link 6</a></div>

</div>
</div>
</div>
</div>

And my styles look like this:

div.menu-parent-div {
	margin-bottom: .8rem;
}

.menu-link-div {
display: block;	
    height: 50px;
    line-height: 50px;
}

.menu-link-div a{
	background-color:#ff0099!important;
	padding:10px 20px;
	color:#000!important;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

This issue I am having is that my styles are not appearing in dev tools. The style classes appear in html – they are just not manifesting themselves on the page. The page is unreachable by the public (apologize – can’t do anything about that)

The page I need help with: [log in to see the link]