title: How to center a menu using flexbox
body: <p>I have a second-line menu that I'd like to center using flexbox.  I'm new to flexbox and have a few questions:</p>
  
  <ol>
  <li>When I validate the HTML in DreamWeaver CS6 it doesn't recognize the elements top_row, left_button and right_button.  Yet I followed a few examples for flexbox that show this is a proper format.  What am I doing wrong with these element definitions?</li>
  <li>How do I get the row "Main Menu", which is 875px wide,  to stay centered as I expand the window to make it wider and narrower?  Right now it stays left-justified.</li>
  <li>How do I get the left_button (Home) to stay lined up with the left side of Main Menu as the window is widened and narrowed?  Right now it stays left-justified.</li>
  <li>How do I get the right_button (Back) to stay lined up with the right side of Main Menu as the window is widened and narrowed?  Right now it lines up with the right side of the expanded or narrowed window.</li>
  <li>How do I get the "text-decoration: none;" property to work so that there are no underscores on the button?</li>
  </ol>
  
  <p>Here's the sample code I have at my first attempt to use flexbox.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;style type="text/css"&gt;
      body {
        background: #EEE8AA;
      }
      #main {
        margin: 0px;
        padding: 0px;
        display: flex;
        flex-flow: row;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        line-height: 25px;
        text-align: center;
        max-width: 875px;
        align-items: center;
        justify-content: space-between;
      }
      #main &gt; top_row {
        background: #BDB76B;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 875px;
        height: 25px;
      }
      #main &gt; left_button {
        margin: 5px;
        background: #BDB76B;
        order: 1;
        position: absolute;
        left: 0;
        width: 150px;
        text-decoration: none;
      }
      #main &gt; right_button {
        margin: 5px;
        background: #BDB76B;
        order: 3;
        position: absolute;
        right: 0;
        width: 150px;
        text-decoration: none;
      }
    &lt;/style&gt;
    &lt;title&gt;Sample Title&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="main"&gt;
      &lt;top_row&gt;Main Menu&lt;/top_row&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;div id="main"&gt;
      &lt;left_button&gt;&lt;a href="http://www.msn.com/"&gt;Home&lt;/a&gt;
      &lt;/left_button&gt;
      &lt;right_button&gt;&lt;a href="#" onclick="history.go(-1)"&gt;Back&lt;/a&gt;
      &lt;/right_button&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When this is working, I'll move the <code>&lt;style&gt;</code> tag information to a CSS file.
  Thanks for looking at this.</p>