Как переместить текст с помощью CSS?

Question

Я пытаюсь переместить панель навигации в верхнем правом углу.Я пытался сделать это с помощью отступов.Padding-right, top, left работает, но padding-bottom не работает.Я также попытался использовать float:right;, но он не отображается в нужном положении.Что я делаю не так?

.nav1 a {
  padding-right: 10px;
  padding-bottom: 50px;
  text-decoration: none;
}

<nav class="nav1">
  <a href="./Index.html">HOME</a>
  <a href="./About_Me.html">ABOUT ME</a>
  <a href="./Contact.html">CONTACT</a>
</nav>

Answer 1

Вы можете решить эту проблему, добавив свойство text-align к nav css.Смотрите фрагмент:

nav {
  text-align: right;
}

.nav1 a {
  padding: 10px;
  text-decoration: none;
}

<nav class="nav1">
  <a href="./Index.html">HOME</a>
  <a href="./About_Me.html">ABOUT ME</a>
  <a href="./Contact.html">CONTACT</a>
</nav>

Answer 2

поиск flex и justify-content

.nav1 {
  background:aqua;
  display:flex;
  justify-content:flex-end;
}

.nav1 a {
    padding-right: 10px;
    padding-bottom: 50px;
    text-decoration: none;
}

<nav class="nav1">
      <a href="./Index.html">HOME</a>
      <a href="./About_Me.html">ABOUT ME</a>
      <a href="./Contact.html">CONTACT</a>
</nav>

, если вы хотите центрировать взгляд.

.nav1 {
  background:aqua;
  display:flex;
  justify-content:flex-end;
  height:50px;
}

.nav1 a {
    padding-right: 10px;
    line-height:50px;
    text-decoration: none;
}

<nav class="nav1">
      <a href="./Index.html">HOME</a>
      <a href="./About_Me.html">ABOUT ME</a>
      <a href="./Contact.html">CONTACT</a>
</nav>