Responsive Product Card Using Flexbox

I had an issue creating the spacing between the sale/full prices and the cart icon/button text. I tried adding a right-margin using the following pseudo-elements:

         <div class="prices">
            <p>
              <span class="sale-price">$149.99</span>
              <span class="full-price">$169.99</span>
            </p>
          </div>

.sale-price::after {
  margin-right: 20px;
}

The only fix I could come up with was to add multiple non-breaking spaces to my html file. The pseudo-elements work fine if I add content, just not with adding margins or padding.

Googling came up with the solution to apply display:block to the parent element. I tried adding this to all classes for container elements all the way up to, but not including, main but this made no difference.

Any help on resolving this issue would be greatly appreciated as I'm not happy with using non-breaking spaces and it bothers me that I don't understand why the pseudo-elements are behaving this way.