Centering sidebar title with borders

Hi there! I’m following other discussions to put borders on widgets and align the title in the center, however the little bar under the title doesn’t follow the title. I tried to introduce this CSS code:
#secondary .widget-title:after {
left: 45%;

I’ve put it in different positions but something else changes every time I copy that, I don’t know what else to do.

This is the code that I’m currently using:

#secondary .widget .widget-title {
margin-top: -18px;
background: #fff;
padding: 0 15px 15px;
text-align: center;
}

#secondary .widget {
overflow: visible;
}

#secondary .widget {
margin-bottom: 40px;

padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid;
border-color: #dfdfdf;

This is my site: www.travelmisadventures.com
Thanks for your support!

Hi @travelmisadventures,

I hope you are well today and thank you for your question.

I can see it is displaying fine on your shared site as shown in the attached screenshot.

Could you please tell me exactly how you want it to display?

Best Regards,
Movin

Hi Movin,
Thanks for the quick response.
I’d like the little blue bar to be centered as well, I attach a screenshot to explain better.

To achieve that please try using below custom CSS code by adding it in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

#page #secondary .widget-title:after { left: 43%; }

Perfect! Thank you so much!!

You are most welcome here :slight_smile: