title: SVG misaligned when resizing screen
body: <p>I'm using some SVG's above and below a div to create an interesting shape that also scales well on small screens. A reduced test case can be seen here:</p>
  <p><a href="https://codepen.io/jciw/pen/eYWEazp" rel="nofollow noreferrer">https://codepen.io/jciw/pen/eYWEazp</a></p>
  <p>The SVG seems to align perfectly sometimes, but when resizing you can see a small (1px) gap between the SVG and the above or below div (to the left and the right). I'm assuming this is a rounding error, but is it solvable?</p>
  <p>Reduced test case code:</p>
  <pre><code>    &lt;div class=&quot;container&quot;&gt;
          &lt;svg class=&quot;homepage-rect-top&quot; width=&quot;566&quot; height=&quot;55&quot; viewBox=&quot;0 0 566 55&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
          &lt;path d=&quot;M9.81142 16.8646L554.811 54.484C560.592 54.883 565.5 50.3017 565.5 44.5078V0.5H0.5V6.88831C0.5 12.1439 4.5683 16.5026 9.81142 16.8646Z&quot; fill=&quot;white&quot;/&gt;
          &lt;/svg&gt;
          &lt;div class=&quot;homepage-rectangle&quot;&gt;
  
          &lt;/div&gt;
          &lt;svg class=&quot;homepage-rect-bottom&quot; width=&quot;566&quot; height=&quot;55&quot; viewBox=&quot;0 0 566 55&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
          &lt;path d=&quot;M9.81142 16.8646L554.811 54.484C560.592 54.883 565.5 50.3017 565.5 44.5078V0.5H0.5V6.88831C0.5 12.1439 4.5683 16.5026 9.81142 16.8646Z&quot; fill=&quot;white&quot;/&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  
  
  
   body {
        background: #999999;
      }
      
      .container {
        max-width: 80%;
        margin: 0 auto;
      }
      
      .homepage-rectangle {
          background: white;
          min-height: 300px;
      }
      
      .homepage-rect-bottom {
          width: 100%;
          height: auto;
          display: block;
          stroke: white;
      }
      
      .homepage-rect-top {
          width: 100%;
          height: auto;
          display: block;
          stroke: white;
          transform: scaleY(-1);
          margin-bottom: -5px;
      }
      
      .reverse-it {
          transform: scaleX(-1);
      }
      
      .flip-reverse-it {
          transform: scale(-1);
      }
  </code></pre>