title: Div floating right is pushing my centered table to the left. How do I fix this?
body: <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>table.center {
    margin-left: auto;
    margin-right: auto;
  }
  
  .menu {
    margin-top: 220px;
  }
  
  .right {
    float: right;
    display: inline;
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="right"&gt;
    Contact
  &lt;/div&gt;
  
  &lt;div class="menu"&gt;
    &lt;table class="center"&gt;
      &lt;tr&gt;
        &lt;th&gt;Heading&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Stuff&lt;/td&gt;
        &lt;td&gt;More Stuff&lt;/td&gt;
      &lt;/tr&gt;
   &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to create a website that has a scrolling menu in the center of the page, which is working fine. I want to add a <code>div</code>/aside to the right side of the menu for contact information and hours, but the div is pushing the top <code>table</code> element to the left and messing up alignment. I tried making it <code>inline</code>, but that did not fix it, and getting rid of the margins did not help either. </p>