Transform scale on anchor elements not working in flexbox - html

Question

I am using a flexbox as my navigation bar at the top of my page. I have only included the code for this part because the project is an entire site. All anchor tags on my site are styled the same, with the same transform: scale(1.2) characteristic on hover. This works everywhere except in my nav. Nothing seems to scale at all inside of my nav.
Additionally on this codepen, the flexbox doesn't seem to respect the justify-content: space-around, making the anchors appear more squished together than they do on my actual site.
Codepen: https://codepen.io/colesam/pen/YxLPVW
a {
color: #646c84;
font-weight: 500;
line-height: 1.7vw;
transition: all 0.2s;
}
a:hover {
color: #ffaf54;
cursor: pointer;
transform: scale(1.2);
text-decoration: none;
}
a:focus {
color: #646c84;
text-decoration: none;
}
a:focus:hover {
color: #ffaf54;
cursor: pointer;
}
.active-indicator {
background: #ffaf54;
border-radius: 25px;
height: 2px;
margin-top: -2px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transition: all 0.2s;
width: 25px;
}
.active-indicator.active {
opacity: 1;
}
#menu {
background: whitesmoke;
border: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 0 25vw;
position: fixed;
left: -1;
right: -1;
top: 0;
transition: all 0.2s;
z-index: 1;
}
#menu a {
font-size: 0.9vw;
}
#menu.inactive {
opacity: 0;
}
<div id="menu">
<div id="landing-nav">
<a>Home</a>
<div class="active-indicator active"></div>
</div>
<div id="about-nav">
<a>About</a>
<div class="active-indicator"></div>
</div>
<div id="portfolio-nav">
<a>Portfolio</a>
<div class="active-indicator"></div>
</div>
<div id="resume-nav">
<a>Resume</a>
<div class="active-indicator"></div>
</div>
<div id="contact-nav">
<a>Contact</a>
<div class="active-indicator"></div>
</div>
</div>

Answer 1

Your nav menu has no extra width, so the flex items are packed together.
Yes, you create the illusion of width with:
#menu { padding: 0 25vw; }
But that just adds padding to the left and right of the container. The items are still packed together, and justify-content has no space to work.
revised codepen (padding removed)
Instead of padding, try using something like width: 50vw.
revised codepen (padding removed; width added)
The problem with the transform: scale() is that you have it applied to an inline-level element (a), which is not a transformable element.
Either add display: block to the anchor elements, or apply the transform to the parent div.
revised codepen (padding removed; width added; added display: block to a elements)
References:
https://drafts.csswg.org/css-transforms/#transform-property
https://drafts.csswg.org/css-transforms/#transformable-element

Answer 2

You have used invalid property values for your fixed nav.
Replace
left: -1;
right: -1;
with
left: 0;
right: 0;
I'm not sure why exactly transform: scale is not working, but it can be fixed by changing the display value of the div wrapping the anchor tags to flex
Codepen