ul { 
  list-style: none;
}

header {
  height: 17vh;
  position: relative;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
  
}

header nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

header nav .logo { 
  color: #E2E2E2; 
  font-size: 2em;
  text-transform: uppercase; 
  padding: 20px 20px 10px 20px;
}

header nav .logo a { 
  color: #E2E2E2;
  text-decoration: none;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
}

header nav li a {
  color: #E2E2E2;
  display: block;
  text-decoration: none;
  position: relative;
  padding: 20px 20px 10px;
}

header nav li a:before, header nav li a:after {
  content: "";
  bottom: 0;
  width: 0px;
  height: 2px;
  display: block;
  position: absolute;
  background-color: #E2E2E2;
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;  
}

header nav li a:before { 
  right: 50%;
}

header nav li a:after { 
  left: 50%;
}

header nav li a:hover:before , header nav li a:hover:after {
  width: 50%;
}