title: CSS3 shape not postioning correctly
body: <p>I am trying to create a custom shape in CSS3 but I am having problems with the position of the object at certain screen resolutions.  </p>
  
  <p>What I am trying to make:</p>
  
  <p><img src="https://i.stack.imgur.com/mY7YC.png" alt="enter image description here"></p>
  
  <p>CSS:</p>
  
  <pre><code>.foobar {
      position: relative;
      width: 100px;
      background-color: #666733;
      color: #ffffff;
      border: none;
      padding: 5px 0;
      margin-left: 10px;
      margin-bottom: 5px;
  
  }
  
  .foobar:before {
      content: "";
      position: absolute;
      width: 110px;
      height: 22px;
      background: #666733;
      padding-left: 0;
      margin-left: -32px;
      -moz-border-radius: 100px / 50px;
      -webkit-border-radius: 100px / 50px;
      border-radius: 100px / 50px;
      z-index: -100;
  
  }
  </code></pre>
  
  <p>The issue I am having is with the <code>foobar:before</code> at different screen resolutions looks off:</p>
  
  <p><strong>iPhone:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/3Toaj.png" alt="enter image description here"></p>
  
  <p><strong>iPad:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/eVUOD.png" alt="enter image description here"></p>
  
  <p><strong>Desktop:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/zTbvv.png" alt="enter image description here"></p>
  
  <p>How can I properly code the shape with CSS so that it will work with all screen sizes?  I have attempted to create <code>@media</code> with an adjustment of <code>margin-left</code> but I was curious to know if there is a better way?</p>