title: Why is my transformed hamburger menu close button uneven?
body: <p>I'm trying to create a hamburger menu in which after you click it, it turns into a close ("X") button.  So I put together this HTML for the hamburger menu</p>
  
  <pre><code>&lt;div id="mobile-nav"&gt;
  
          &lt;div class="menuContainer"&gt;
                  &lt;div class="bar1"&gt;&lt;/div&gt;
                  &lt;div class="bar2"&gt;&lt;/div&gt;
                  &lt;div class="bar3"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
       &lt;nav&gt;
             &lt;a href='#'&gt;Vote&lt;/a&gt;
             &lt;a href='#'&gt;Search&lt;/a&gt;
             &lt;a href='#'&gt;Contact&lt;/a&gt;
       &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and these styles</p>
  
  <pre><code>.menuContainer {
      display: inline-block;
      cursor: pointer;
  }
  
  .bar1, .bar2, .bar3 {
      width: 25px;
      height: 4px;
      background-color: #333;
      margin: 5px 0;
      transition: 0.4s;
  }
  
  .change .bar1 {
      -webkit-transform: rotate(-45deg) translate(-9px, 6px);
      transform: rotate(-45deg) translate(-9px, 6px);
  }
  
  .change .bar2 {opacity: 0;}
  
  .change .bar3 {
      -webkit-transform: rotate(45deg) translate(-8px, -8px);
      transform: rotate(45deg) translate(-8px, -8px);
  }
  </code></pre>
  
  <p>However, when I click on the button, the "X" seems cut off on the right side -- <a href="https://jsfiddle.net/8jvrrcqq/3/" rel="nofollow noreferrer">https://jsfiddle.net/8jvrrcqq/3/</a> .  What can I do to make the X even on both the left and right sides?</p>