Solve custom product badge display

I have a problem with a custom product badge in my site. I have add a new product badge (other than "Sale") but it is display in not correct position.

The badge have to display "Choice" on the featured product, so I have added this code on the function.php child theme:

// This adds "choice" product badge on product image

function wc_add_featured_product_flash() {
global $product;

  if ( $product->is_featured() ) {
      echo '<span class="onsale2">Choice</span>';
  }
}
add_action( 'woocommerce_before_shop_loop_item_title', 'wc_add_featured_product_flash', 10 );

add_action( 'woocommerce_before_single_product_summary', 'wc_add_featured_product_flash', 10 );

Then on the CSS file I have added this code for display the badge:

/* Adjust how "Choice" badge appears on different screen sizes */

@media only screen and (max-width: 600px) {
.woocommerce span.onsale2 {
margin: -120px 0;
top: 0px;
left: 0% !important;
}
}
@media only screen and (min-width: 601px) and (max-width: 1023px) {
.woocommerce span.onsale2 {
margin: -200px 0;
top: 0px;
left: 0% !important;
}
}
@media only screen and (min-width: 1024px) {
.woocommerce span.onsale2 {
margin:-228px 0 ;
top: 0px;
left: 0% !important;
}
}
/* "Featured" badge which has class .onsale2 */

.woocommerce span.onsale2 {
position: absolute;
min-width: 10px !important;
background-color: #232f3d;
color: #ffd700;
padding: 16px 12px;
font-size: 16px;
line-height: 1;
font-weight: 1000;
z-index: 9;
text-align: center;
top: 20px;
left: 0px;
background: #232f3d;
color: #ffd700;
}
.woocommerce ul.products li.product .onsale2 {
top: 20px;
left: 0;
min-width: 100px !important;
}

The result is that on the home page the badge is in the correct position (https://www.modacapellishop.it/) but is not the same with the product page (https://www.modacapellishop.it/prodotto/milk-shake-volume-solution-volumizing-shampoo/).
How can I solve this?

>Solution :

You could set different margin values for the sale badge within your product details page.

The body of the product detail page has its own class (single-product)

For example:

.woocommerce.single-product span.onsale2{
    margin: 0px !important;
}