Help with custom footer

I am creating a custom footer. Here is my code

HTML
<div class=”footerBG”>
<div class=”footSec”>© Copyright – ELEV8.VC 2020</div>
<div class=”footSec”>

<ul class=”noLightbox social_bookmarks icon_count_2″>
<li class=”social_bookmarks_facebook av-social-link-facebook social_icon_2″><span class=”avia_hidden_link_text”>Facebook</span>
<li class=”social_bookmarks_twitter av-social-link-instagram social_icon_1″><span class=”avia_hidden_link_text”>Instagram</span>
<li class=”social_bookmarks_twitter av-social-link-twitter social_icon_1″><span class=”avia_hidden_link_text”>Twitter</span>
<li class=”social_bookmarks_twitter av-social-link-linkedin social_icon_1″><span class=”avia_hidden_link_text”>Linkedin</span>

</div>
<div class=”footSec”>[av_sidebar widget_area='navigation']</div>
</div>

CSS
.footerBG {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
padding:20px;
background-color: #000a1f;
color: #ffffff;
}

@media screen and (max-width: 680px) {
.footerBG .footSec {
flex-basis: 100%;
margin: 0 0 5px 0;
}
}

.widget .social_bookmarks li {
clear: none !important;
text-align: center;
}

#footer .textwidget .social_bookmarks {
text-align: center;
}

#footer .textwidget .social_bookmarks li {
display: inline-block;
float: none;
}

#footer {
padding: 0px 0 0px 0;
}

#footer .widget {
margin: 0;
}

@media only screen and (max-width:990px) {
#footer .textwidget .social_bookmarks {
display: block !important;
}
}

@media only screen and (max-width:767px) {
#footer {
text-align: center;
}
}

#nav_menu-2 #menu-elev8 li {
display: inline-table;
text-transform: uppercase;
}

.widget_nav_menu ul ul {
display: none !important;
}

As you can see in my code, on the right column, I have the the enfold menu – [av_sidebar widget_area='navigation'] – but it is NOT showing up on my site – https://balrajdesign.com/elev8 – scroll to footer section

Please help