nft preview card using HTML and CSS

Hi !

I would suggest :

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

box-sizing: border-box will be helpful for the box model and to not calculate width/height of elements (ex: width - padding - border etc...) find more here

• You could add a padding: 24px; on your main-container and remove all margin-left; margin-right you have on your elements

• You could wrap your image width a <div> and put it in position:relative;

• Then add another div inside and wrap the icon svg :

{
display: flex;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    inset: 0;
    place-items: center;
    place-content: center;
}

• Call the SVG like this :

<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fill-rule="evenodd">
            <path d="M0 0h48v48H0z"></path>
            <path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="#FFF" fill-rule="nonzero"></path>
          </g>
        </svg>

• width: 105%on your .price-time is not necessary and get the design worse
• same on .by-created, width:100% is not needed because it is a block element find more here

Hope this comment will be helpful :)