'image to take the all space of the container

attached a js fiddle to show my issue. I want the orange image to take all the top area of the card and not have padding on the top and sides. the image should show from the very top and takes all the sides with no space link to fiddle

.pricing-card {
  color: black;
  width: 100%;
  max-width: 330px;
  max-height: 463px;
  flex-flow: column;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 10px 70px #2e231d1a;
  border-radius: 50px;
  opacity: 1;
  min-height: 550px;
  margin: auto;
}

#logo {
  top: 50px;
  position: absolute;
  left: 50px;
}

#rectangle {
  max-width: 330px;
}
<div class="price-container">
  <div v-if="checkDomainTrial" class="price-text">
    Get your entire first month free on us!
  </div>
  <div class="header">
    <div id="wait">Wait! Don't go yet!</div>
  </div>
  <div class="pricing-card">
    <div class="pricing-card-header">
      <img id="rectangle" src="https://i.ibb.co/FVkvCv5/Rectangle-cancellation.png" alt="" />
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions