CSS text-align and vertical-align confusion - css

Question

I am trying to create a very simple webpage to learn a bit about CSS as I am awful with it.
I am trying to add a navigation bar to my page. The two elements that are not working as expected are the text-align: center (in .Item) and vertical-align: bottom. If I add or remove these lines nothing happens.
Could anyone tell me why these two parts don't seem to be working as expected? Thanks in advance.
My JSX is as follows:
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<ul className={classes.Item}>
About
</ul>
<ul className={classes.Item}>
Shop
</ul>
</div>
</div>
</React.Fragment>
My CSS is as follows:
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 50%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
vertical-align: bottom;
}
.Item {
text-align:center;
margin:10px;
display: inline;
border: 2px solid black;
}

Answer 1

.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 100%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
vertical-align: bottom;
display: flex;
align-items: center;
justify-content: center;
}
.Nav ul{
margin: 0px;
padding: 0px;
}
.Nav li{
display: inline-block;
margin: 0 10px;
padding: 0px;
border: 1px solid red;
text-align: center;
}
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<ul className={classes.Item}>
<li> About</li>
</ul>
<ul className={classes.Item}>
<li> Shop</li>
</ul>
</div>
</div>
</React.Fragment>

Answer 2

After reading all of your suggestions I was able to do it as follows:
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 50%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
}
.Item {
position: relative;
text-align: center;
margin: 0px 50px;
display: inline;
border: 2px solid black;
top: calc(100% - 30px);
}
And
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<div className={classes.Item}>About</div>
<div className={classes.Item}>Shop</div>
</div>
</div>
</React.Fragment>