title: Text-Align: Center not centering properly
body: <p>I am trying to create a navbar with a centered title and links to other pages on the site on the right, but the title does not seem to be centering, even when I am using <code>text-align: center</code>. In order to keep the title and links to other pages on the same line, I am using a flexbox. Is there something wrong with this method (e.g. <code>text-align</code> is not compatible with flexbox) or is there simply something generally wrong with my code?</p>
  
  <p>Here is my HTML/CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  
  }
  
  body {
    background-color: orange;
  
  }
  
  nav {
    width: 100%;
    height: 60px;
    background-color: black;
    display: flex;
  }
  
  nav p {
    text-align: center;
    font-family: arial;
    color: white;
    font-size: 24px;
    line-height: 55px;
    float: left;
    padding: 0px 20px;
    flex: 1 0 auto;
  
  
  }
  
  nav ul {
    float: left;
  
  }
  
  nav ul li {
    float: left;
    list-style: none;
    position: relative; /* we can add absolute position in subcategories */
  
  
  
  }
  
  nav ul li a {
    display: block;
    font-family: arial;
    color: white;
    font-size: 14px;
    padding: 22px 14px;
    text-decoration: none;
  }
  
  
  nav ul li ul {
    display: none;
    position: absolute;
    background-color: black;
    padding: 5px; /* Spacing so that hover color does not take up entire chunk */
    border-radius: 0px 0px 4px 4px;
  
  }
  
  nav ul li:hover ul {
    /* This means when li is hovered, we want the unordered list inside list item to do something. */
    display: block;
  
  
  }
  
  
  nav ul li ul li{
    width: 180px; /* increases width so that all text can be fit */
    border-radius: 4px;
  
  
  }
  
  nav ul li ul li a:hover {
    background-color: #ADD8E6;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   
  &lt;head&gt; 
   &lt;link href="header+footer.css" rel = "stylesheet" type="text/css" /&gt;
   &lt;title&gt; The Novel Column - Book Reviews &lt;/title&gt;
  
  &lt;/head&gt;
   
  
  &lt;body&gt;
  
  &lt;nav&gt;
  
   &lt;p&gt; The Novel Column &lt;/p&gt;
  
   &lt;ul&gt;
    &lt;li&gt; &lt;a href="#"&gt; Content &lt;/a&gt;
     &lt;ul&gt; 
      &lt;li&gt; &lt;a href="#"&gt; Subsection 1 &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt; &lt;a href="#"&gt; Subsection 2 &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt; &lt;a href="#"&gt; Subsection 3 &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt; &lt;a href="#"&gt; Subsection 4 &lt;/a&gt; &lt;/li&gt;
     &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt; &lt;a href="#"&gt; About Us &lt;/a&gt; &lt;/li&gt;
   &lt;/ul&gt;
   
  &lt;/nav&gt;
  
  
  
  
  
  &lt;/body&gt;
  
  
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance for your help!</p>