Solved Text as cta buttons won't centre on mobile

Hi,

I'm very new to CSS so bear with me!

I've added some custom CSS I found to create call to action buttons from some text in my full-width header.

They look fine and aligned on desktop:



but on mobile they're not centrally aligned as below:




I'm thinking this is a padding/margin issue, but have tried every piece of googled advice and variations with
@media (max-width: 980px){ additions but to no avail.

Here's the code I'm using to style the text as CTA buttons:

}

/* Buttons in header, very important! */
a.blog-cta {
font-size: 18px; font-weight: 500; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #FFFFFF; border-color: #FFFFFF; padding: 6px 10px; line-height: 3em; background: transparent; border: 2px solid; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; position: relative; left: -20px;}

a.blog-cta:hover {
background: rgba( 255, 255, 255, 0.2 ); border: 2px solid transparent; !important; }

Any help from anyone about how to centre these buttons on top of each other in a nicely aligned column on mobile?

Setting these particular buttons to a fixed width rather than padded around text would probably solve it, but I don;t know how!

If you've managed to read this far, thanks in advance!


Matt

 

Of course!

http://www.purposebuilt.co.uk/portfolio/wordpress

 

Amazing, thanks!

With a little addition of min-width to size the buttons the same regardless of word length, I have the buttons looking exactly as I wanted.

Very grateful for this fix.