CSS translate not working with flex-box element - html

Question

So I was recently trying to make an header in which I was using CSS flex property for the alignment of the elements.
Problem came when I tried to do some animations...
Here is what happened when I used the direct child of flex property, i.e. in flexbox I used content--left,center,right to align the elements.
video link(in which translation happens at the login element) - https://drive.google.com/file/d/1TrBrW4KoI43SH0IJj5AQYiq2qNWFqcwv/view
my code(s) for it...
HTML
<header className='second-header'>
<a href='/tours' className='second-header__content--left'>
All Tours
</a>
<img
src='images/logo-white.png'
alt='Logo'
className='second-header__content--center'
/>
<a href='/' className='second-header__content--right'>
Log In
</a></header>
CSS
.second-header {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: $color-grey-dark;
font-size: 1.4rem;
font-weight: 300;
text-transform: uppercase;
a {
text-decoration: none;
color: $color-grey-light-2;
margin: 0 3rem;
}
img {
height: 3rem;
width: 6rem;
}
&__content--left,
&__content--right {
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
&:hover,
&:active {
text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 1);
transform: translateY(-.25rem);
-webkit-transform: translateY(-.25rem);
-moz-transform: translateY(-.25rem);
-ms-transform: translateY(-.25rem);
-o-transform: translateY(-.25rem);
}
}
}
}
Now this is the thing that happens when I add another element in content right the translate does not work
video link - https://drive.google.com/file/d/1wvTGNCe98qbAb1-aZQZofTar0ow84Ci_/view
my code(s) for the same
HTML
<header className='second-header'>
<a href='/tours' className='second-header__content--left'>
All Tours
</a>
<img
src='images/logo-white.png'
alt='Logo'
className='second-header__content--center'
/>
<section className='second-header__content--right'>
<a href='/' className='second-header__content--right-login'>
Log In
</a>
<button className='second-header__content--right-signup'>
Sign Up
</button>
</section>
</header>
CSS
.second-header {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: $color-grey-dark;
font-size: 1.4rem;
font-weight: 300;
text-transform: uppercase;
a {
text-decoration: none;
color: $color-grey-light-2;
margin: 0 3rem;
}
img {
height: 3rem;
width: 6rem;
}
&__content--left,
&__content--right-login {
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
&:hover,
&:active {
text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 1);
transform: translateY(-.25rem);
-webkit-transform: translateY(-.25rem);
-moz-transform: translateY(-.25rem);
-ms-transform: translateY(-.25rem);
-o-transform: translateY(-.25rem);
}
}
&__content--right {
button {
text-decoration: none;
background-color: $color-grey-dark;
padding: 1rem 2rem;
border: 1px solid $color-grey-light-2;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
color: $color-grey-light-2;
text-transform: uppercase;
font-family: Lato;
font-size: 1.4rem;
font-weight: 300;
&:hover,
&:active {
cursor: pointer;
color: $color-grey-dark;
background-color: $color-white;
}
}
}
}
As you all can see in the second part there is no transform(only text-shadow gets applied) happening and I would really want to know whether its my code architecture that's cause of the problem or something else. If you found my codes too long please check my architecture and content--right, content--right-login elements. Thanks to the kind soul in advance for giving me a fix for this.