Button changes location on smaller screen - how to centre it instead of "margin-left: 0"?-CodePudding

Website: https://bucksfoodpartnership.org/

So on my desktop the text over the top image "Buckinghamshire Food Partnership believe that everyone is entitled to a Right to Food" and the button "Get involved" are aligned to left with 10% margin. However on smaller screen the text is centered (as it should be), but the button is aligned to the far left. How can I make it centered as well (not all the time, only when the text above is centered)?

I think this class makes it aligned to left:

.content-caption {
    max-width: 100%;
    left: 0;
    position: relative;
    text-align: center;

but adding

position: relative; 
left: 50%;
transform: translateX(-50%);

margin: auto;

Doesn't help really. Am I barking at the wrong tree here?

CodePudding user response：

All you need to do is set wp-block-button to width:100%.

.wp-block-button{
 width:100%;
}

Because of all the inherited styles and the way inline-block behaves with text-align:center this will work for you. Even accross your breakpoints.