Streepje onder second child menu breder

Hoi
ik ben bezig met de site http://www.db7663.web54.ixl.nu/. Rechtsboven is een menu en ik heb geanimeerde lijntjes onder elk item gezet. Echter het tweede menu item is wat breder en daarom wilde ik het lijntje voor deze wat breder maken (ipv 70% 90% of 100%).
Dit is de code:

.menu-item:second-child > a {
  position: relative;
  text-decoration: none;
}

.menu-item:second-child > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 10px;
  left: 15%;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.menu-item:second-child > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

De code zonder second child erin werkt prima, maar hij lijkt deze code niet te ‘pakken’ (streepje tweede item wordt niet breder wordt ook 70% net als bij de andere drie).
Kan iemand mij hiermee helpen?
Groet
Sasseke