Child element does not counter-skew when it's supposed to - html

Question

I have a navigation bar that I want to skew, but just the bar and not the words of the bar.
So, I skewed the main div (of the navigation bar), and skewed the negative value of it to the text.
However, the text still does not un-skew.
How does this work?
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#navbarbox
{
clear: both;
display: block;
width: 80vw;
height: 3.5vw;
margin: auto;
padding: 0.5vw 0 0 0;
}
#navbar, #navbar ul
{
width: 70vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
}
#navbar span
{
height: 3.5vw;
transform: skewX(15deg); /*This is supposed to un-skew, but doesn't work!*/
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 0.8vw 3vw 0 3vw;
text-align: center;
color: red;
font-size: 2vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
background-color: green;
}
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li style="background-color: purple;"><span>Home</span></li>
<li id="server"><span>Servers</span></li>
<li id="community"><span>Community</span></li>
<li id="store"><span>Store</span></li>
<li id="downloads"><span>Downloads</span></li>
<li id="contact"><span>Contact</span></li>
</ul>
</div>
</body>

Answer 1

The transformation has no affect on your span element because it is being displayed as inline. You need to set it to display as a block:
#navbar span {
display: block; /* or inline-block */
}
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#navbarbox
{
clear: both;
display: block;
width: 80vw;
height: 3.5vw;
margin: auto;
padding: 0.5vw 0 0 0;
}
#navbar, #navbar ul
{
width: 70vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
}
#navbar span
{
display: block;
height: 3.5vw;
transform: skewX(15deg);
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 0.8vw 3vw 0 3vw;
text-align: center;
color: red;
font-size: 2vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
background-color: green;
}
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li style="background-color: purple;"><span>Home</span></li>
<li id="server"><span>Servers</span></li>
<li id="community"><span>Community</span></li>
<li id="store"><span>Store</span></li>
<li id="downloads"><span>Downloads</span></li>
<li id="contact"><span>Contact</span></li>
</ul>
</div>
</body>