How can I customize and center badges in my Dawn Theme?

[RCar193]

Hey, 

I'm trying to customise the badges in my Dawn Theme and I can't seem to figure this part out. 

I want my badge to down as the image here (the brown is goal, the black is the old style) 

But I can't seem to expand the badge or center it. 

My current code is below

.badge {
border: 1px solid transparent;
display: inline-block;
font-size: 1.2rem;
letter-spacing: 0.1rem;
line-height: 1;
padding: 0.6rem 1.3rem;
text-align: center;
background-color: #ac7a4e;
border-color: #ac7a4e;
color: rgb(var(--color-foreground));
word-break: break-word;
}

any advice? 

[timkuts]

Please send the link to the page with the badge 

[RCar193]

here you go: https://ktpnin40cvxwcf7d-36931108908.shopifypreview.com/collections/plants?page=6

thanks in advance for the help! 

[timkuts · Accepted solution]

At the end of the CSS add

.card__badge{
	width: 100%;
    left: 0;
    top: 50%;
    height: 20px;
}

.card__badge span.badge{
	width: 100%;
    margin-right: 0;
}

It should go like this: 

[RCar193]

Thanks ! That worked !

[timkuts]

Happy to help