Проблема с выравниванием с помощью vh

Я действительно пытаюсь создать панель навигации.

Однако я хочу, чтобы это было около 7vh, и я хочу, чтобы шрифт корректировался с этим. Проблема в том, что граница небольшого эффекта наведения не всегда будет идеально выровнена (отображение в полноэкранном режиме).

Если кто-нибудь знает, как это исправить, мы будем очень признательны.

* {
  font-family: Futura;
  margin: 0px;
  padding: 0px;
  color: white;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #2b2b2a;
}

a {
  text-decoration: none;
}

nav {
  height: 7vh;
  background-color: DeepSkyBlue;
  text-align: center;
  width: 100%;
  position: fixed;
}

/* NOTE: Classes */

/* NOTE: Text elements */

.nav-link {
  font-size: 4vh;
  margin: 0px 1%;
  vertical-align: bottom;
  position: relative;
  padding-top: 1vh;
  top: 1vh;
}

.column-title {
  font-size: 24px;
  padding-bottom: 0.3vh;
}

.column-text {
  text-align: left;
}

#premiere {
  font-size: 3vh;
  float: right;
  transform: translate(-5%, -110%);
}

/* NOTE: Box elements */

.home-column-warper {
  display: inline-table;
  width: 100%;
  text-align: center;
}

.column {
  width: 22%;
  margin: 2vh 1%;
  display: inline-block;
  border: 3px solid white;
  vertical-align: top;
}

/* NOTE: Other */

.logo-image {
  height: 5.5vh;
  float: left;
  margin-top: 0.7vh;
  margin-left: 0.7vh;
  transform: translate(0%, -110%)
}

.vline {
  border-right: 3px solid white;
  font-size: 20px;
  padding-left: 6px;
}

.selected {
  border-bottom: solid 3px LightBlue;
  padding-bottom: 0.4vh;
}

::selection {
  background: DeepSkyBlue;
}

/* NOTE: IDs */

#nav-warper {
  width: 100%;
  height: 6vh;
}

/* NOTE: Hover */

.nav-link:hover {
  color: wheat;
  border-bottom: solid 3px LightBlue;
  padding-bottom: 0.4vh;
}

<!DOCTYPE html>
<html lang = "fr" dir = "ltr">
  <head>
    <meta charset = "utf-8">
    <title>Bac 2018</title>
    <link rel = "stylesheet" href = "./data/CSS/styling.css">
  </head>
  <body>
    <nav>
      <div id = "nav-warper">
        <a href = "#" class = "nav-link selected">Accueil</a><a class = "vline"></a>
        <a href = "./data/Pages/plans.html" class = "nav-link">Plans</a><a class = "vline"></a>
        <a href = "./data/Pages/cours.html" class = "nav-link">Cours</a><a class = "vline"></a>
        <a href = "./data/Pages/plus.html" class = "nav-link">Plus</a>
      </div>
      <img src = "./data/Media/logo.png" alt = "Logo du site" class = "logo-image">
      <span id = "premiere">Première Littéraire</span>
    </nav><br><br><br>
    <div class = "home-column-warper">
      <div class = "column">
        <p class = "column-title">PLANS</p>
        <span>Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe. Pour obtennir la définition d'un mot passer le curseur dessus, les mots dotés d'une définition sont soulignés. Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : [email protected], ça évitera que tout le monde apprennent un truc faux...</span>
      </div>
      <div class = "column">
        <p class = "column-title">COURS</p>
        <span>Cette section regroupe les principaux cours de l'année. Tout ce qui est notions, objets d'études ou en relation avec l'oral se retrouve dans cette section. Informations sur objets d'études et cours théorique également dedans</span>
      </div>
      <div class = "column">
        <p class = "column-title">PLUS</p>
        <span>Cette section regroupe toutes les notifications d'erreurs ou les documents inclassables. Bientôt cette section contiendra les documents scan des textes pour le bac oral.</span>
      </div>
      <div class = "column">
        <p class = "column-title">MODIFICATIONS</p>
        <span>Cette section regroupe toutes les modifications oppérés sur le site (Comprend la correction de bugs l'ajout de fonctionnalités et la correction d'erreur dans les fiches).<br>- Ajout de la section PLUS.<br>- Correction FICHE, Dom Juan v1 : "C'est une dimension tragique et non une tragédie".</span>
      </div>
  </body>
</html>

html css

02.04.2018 16:48

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Причина смещения при наведении элемента, скорее всего, связана с тем, что он не существует до того, как наведется курсор, поэтому добавьте эту строку: