HTML and CSS navbar text moves but the animated background colour doesn't

Question

I am making a website and i found a cool navbar online that I am using but when I tried to move it to the right side of the screen using text-align: right; the text moves but the animated background doesn't (my website is a .php file if that helps)

here is the code:

* {
  margin: 0;
  padding: 0;
  font-family: Verdana;
}

nav {
  text-align: right;
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #34495e;
  font-size: 0;
}

nav a {
  line-height: 50px;
  height: 100%;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: white;
  cursor: pointer;
}

nav .animation {
  text-align: right;
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all .5s ease 0s;
  border-radius: 8px;
}

a:nth-child(1) {
  width: 100px;
}

a:nth-child(2) {
  width: 110px;
}

a:nth-child(3) {
  width: 100px;
}

a:nth-child(4) {
  width: 160px;
}

a:nth-child(5) {
  width: 120px;
}

nav .start-home,
a:nth-child(1):hover~.animation {
  width: 100px;
  left: 0;
  background-color: #1abc9c;
}

nav .start-about,
a:nth-child(2):hover~.animation {
  width: 110px;
  left: 100px;
  background-color: #e74c3c;
}

nav .start-blog,
a:nth-child(3):hover~.animation {
  width: 100px;
  left: 210px;
  background-color: #3498db;
}

nav .start-portefolio,
a:nth-child(4):hover~.animation {
  width: 160px;
  left: 310px;
  background-color: #9b59b6;
}

nav .start-contact,
a:nth-child(5):hover~.animation {
  width: 120px;
  left: 470px;
  background-color: #e67e22;
}

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Blog</a>
  <a href="#">Portefolio</a>
  <a href="#">Contact</a>
  <div class="animation start-home"></div>
</nav>

I am new to HTML and CSS and I tried to use justify-items: right; and justify-content: right; but that wouldn't work either.

can anyone please help. Thanks

Answer 1

if you use

nav {
  text-align       : right;

then you have to change all

a:nth-child(3):hover~.animation {
  left : ...

to

a:nth-child(3):hover~.animation {
  right : ...

code sample:

// bonus:
const 
  e_nav  = document.querySelector('nav')
, e_anim = e_nav.querySelector('div.animation')
  ;
e_nav.addEventListener('click', (e) =>
  {
  if (e.target.matches('nav > a'))
    {
    e_anim.className = 'animation start-' + e.target.textContent.toLowerCase();
    }  
  })

* {
  margin      : 0;
  padding     : 0;
  font-family : Verdana;
  }
nav {
  text-align       : right;
  position         : relative;
  width            : 100%;
  height           : 50px;
  background-color : #34495e;
  font-size        : 0;
  --a-width        : 120px;
  }
nav a {
  line-height     : 50px;
  height          : 100%;
  display         : inline-block;
  position        : relative;
  z-index         : 1;
  text-decoration : none;
  text-transform  : uppercase;
  text-align      : center;
  color           : white;
  cursor          : pointer;
  font-size       : 15px;
  width           : var(--a-width);
  }
nav .animation {
  position      : absolute;
  height        : 100%;
  width         : var(--a-width);
  top           : 0;
  z-index       : 0;
  transition    : all .5s ease 0s;
  border-radius : 8px;
  }
nav .start-home,
a:nth-child(1):hover~.animation {
  right            : calc( var(--a-width) * 4);
  background-color : #1abc9c;
  }
nav .start-about,
a:nth-child(2):hover~.animation {
  right            : calc( var(--a-width) * 3);
  background-color : #e74c3c;
  }
nav .start-blog,
a:nth-child(3):hover~.animation {
  right            : calc( var(--a-width) * 2);
  background-color  : #3498db;
  }
nav .start-portefolio,
a:nth-child(4):hover~.animation {
  right            : calc( var(--a-width) * 1);
  background-color : #9b59b6;
  }
nav .start-contact,
a:nth-child(5):hover~.animation {
  right            : 0;
  background-color : #e67e22;
  }

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Blog</a>
  <a href="#">Portefolio</a>
  <a href="#">Contact</a>
  <div class="animation start-home"></div>
</nav>