Nearly finished my new menu, need help for menu right border missing

this is what I want to do, just a missing border. I don’t know if there is a better way to do it. I’m localhost for dev (MAMP) so I cannot show the code, all I have is enfold and the CSS I show you used on a child

Ok I’ve been a little further on the code. But something goes weird and I don’t know why. Just looking the menu, you will see I have a problem on the right….
Here is the code :

/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

/*Add your own styles here:*/
.header_color .sub_menu > ul > li > a, .header_color .sub_menu > div > ul > li > a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
    color: #888888;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}
.avia-menu-fx {
opacity: 1;
visibility: visible;
}
#menu-item-3230 .avia-menu-fx {
background-color: green;
}
#menu-item-3231 .avia-menu-fx {
background-color: blue;
}
#menu-item-3232 .avia-menu-fx {
background-color: orange;
}
#menu-item-3233 .avia-menu-fx {
background-color: red;
}

#menu-item-3230:hover .avia-menu-fx {
background-color: #ffffff;
}
#menu-item-3231:hover .avia-menu-fx {
background-color: #ffffff;
}

#menu-item-3232:hover .avia-menu-fx {
background-color: #ffffff;
}

#menu-item-3233:hover .avia-menu-fx {
background-color: #ffffff;
}

.av-main-nav > li > a {
border-left: 1px solid #444444;
}

.av-main-nav> li:last-of-type  > a {
border-right: 1px solid #444444;
}

Can you explain to me what thing I am using wrong? looks like avia menu fx and av-main-nav are not centered just for the last Item. I don’t know how to solve this.

OK FOUND IT!!! I really like to thank you work on other messages, because I needed to check a lot of messages to get full answer. so many parts in different messages.
So if any one wants to build a menu like this :

code is here :

/*Add your own styles here:*/
.header_color .sub_menu > ul > li > a, .header_color .sub_menu > div > ul > li > a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
    color: #888888;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}
.avia-menu-fx {
opacity: 1;
visibility: visible;
}
#menu-item-3230 .avia-menu-fx {
background-color: green;
}
#menu-item-3231 .avia-menu-fx {
background-color: blue;
}
#menu-item-3232 .avia-menu-fx {
background-color: orange;
}
#menu-item-3233 .avia-menu-fx {
background-color: red;
}

#menu-item-3230:hover .avia-menu-fx {
background-color: #ffffff;
}
#menu-item-3231:hover .avia-menu-fx {
background-color: #ffffff;
}

#menu-item-3232:hover .avia-menu-fx {
background-color: #ffffff;
}

#menu-item-3233:hover .avia-menu-fx {
background-color: #ffffff;
}

.av-main-nav > li > a {
border-left: 1px solid #444444;
}

.av-main-nav> li:last-of-type  > a {
padding-right: 13px !important;
border-right: 1px solid #444444;
}

.html_header_searchicon_disabled #top .main_menu .menu>li:last-child>a .avia-menu-fx {
left: 0!important;
}

You can close, except if you think my code can be improved. Thanks a lot for your support section, was 3 weeks I was working on that….