Bottom-border dynamic main navigation buttons

Hello there,

I’m quite new to coding and can’t find a solution that fits my problem. Or I didn’t use it correctly…

I have 5 buttons in my main navigation and i would love to give them each a different color border at the bottem of the button. I created these lines in my style css:

.technologynav a{border-bottom: 3px solid #313c42;}
.braincandynav a{border-bottom: 3px solid #849494;}
.discovernav a{border-bottom: 3px solid #876855;}
.explorenav a{border-bottom: 3px solid #b7c4c7;}
.whiteboardingnav a{border-bottom: 3px solid #5e6b6e;}

I suppose i need to add a html class code in one of my php pages (header.php?) to make the borders vissable on my website. I currently have a dynamic main navigation.

<div class=”site-navigation”>
<?php wp_nav_menu( array( ‘theme_location’ => ‘main-nav’ ) ); ?>

Can i add classes in my menu widgets or do i need to add a code in my php? I’m feeling lost in my coding and php pages. I would love it if someone could help me out here. It’s just a small border underneath my button with its own color. I’m stuck on this for ages…

Joy