Recently, I started working on a basic webpage to experiment with CSS since I struggle with it.
One issue I'm facing is with the navigation bar. Specifically, the text-align: center property in the .Item class and the vertical-align: bottom property don't seem to be functioning properly. When I try adding or removing these lines, I don't see any changes reflected on the page.
Can anyone provide insights into why these two parts are not working as intended? Thank you in advance.
Here is a snippet of my JSX:
<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>
And here is a snippet of my CSS:
.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;
}