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.

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

Hi, I updated the rights, you can have a look. Thanks in advance, I looked a lot without finding the difference. Everything works fine with avia, and options are checked in Enfold child theme.

But it is not doing what I want. I’m searching infographics like this:
<iframe src=”//infogr.am/personnes-seules/” width=”451″ height=”286″ scrolling=”no” frameborder=”0″ style=”border:none;”></iframe>
And there is nothing that can do it properly yet :(