title: CSS text-align and vertical-align confusion
body: <p>I am trying to create a very simple webpage to learn a bit about CSS as I am awful with it.</p>
  
  <p>I am trying to add a navigation bar to my page. The two elements that are not working as expected are the <code>text-align: center</code> (in .Item) and <code>vertical-align: bottom</code>. If I add or remove these lines nothing happens.</p>
  
  <p>Could anyone tell me why these two parts don't seem to be working as expected? Thanks in advance.</p>
  
  <p>My JSX is as follows:</p>
  
  <pre><code>&lt;React.Fragment&gt;
  &lt;div className ={classes.Logo}&gt;&lt;/div&gt;
  &lt;div className = {classes.Bar}&gt;
      &lt;div className ={classes.Nav}&gt;
  
          &lt;ul className={classes.Item}&gt;
              About
          &lt;/ul&gt;
          &lt;ul className={classes.Item}&gt;
              Shop
          &lt;/ul&gt;
  
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/React.Fragment&gt; 
  </code></pre>
  
  <p>My CSS is as follows:</p>
  
  <pre><code>.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;
  
    }
  </code></pre>