Centre my button

jbriginshawphoto

Hi there,

I cannot figure out what I did wrong and why my "More About Me" button won't sit centered under the rest of the text (See photo).

Here is the code and CSS:

< div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-e76d1b249009a9178ad1">

<

div class="sqs-block-content">
< div class="sqs-html-content">

<

h3 style="text-align:center;white-space:pre-wrap;">I feel the most inspired by wide open rural landscapes and small intimate moments.

< /h3>
< p style="text-align:center;white-space:pre-wrap;" class="">I’m Justin and I'm both a city slicker in Toronto and country bumpkin in Prince Edward County (PEC). I love to drum, play soccer, bike, read and explore new places. I became a photographer because I have always felt that photos make the best souvenirs of life experiences. 

< br>
< p style="text-align:center;white-space:pre-wrap;" class=""> Laughter, being present, meaningful relationships, communication and punctuality are all ingredients in my secret sauce. I am forever inspired by the people that I work with and the stories they tell. This isn’t just a photoshoot, this is a documentary of your love story. 
< /div>

< div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-c16d7493054d54da013a">

< /div> < /div>

< body> < div class="sm-button sm-button-size-large sm-button-skin-default sm-page-widget-button-large sm-page-widget-button-outline sm-page-widget-button-text-light" href="https://www.jbriginshawphotography.com/Meet-Justin" type="button" >More about me

< /body>

CSS:
p {
font-size: 12px;
}
h3 {
font-size: 18px;
}

container {
align-content: center
}

Thank you! Sorry if the code is messy...

Jtring

I'm not sure what the container line is supposed to do. The new CSS container query mechanism requires considerably more code than this. I'm just learning about it so I'm not in a position to fix things here. I'm not even sure SmugMug supports it. Sometimes they strip out unfamiliar (new) HTML and CSS. But ... there are simpler, "old-fashioned" ways to centre your button. This piece of CSS inserted in place of the container stuff works when I try it out using the browser web developer tools.

#block-e76d1b249009a9178ad1 .sqs-block-content {text-align:center;}

You may not even need the reference to the .sqs-block-content class. And sorry about the long time between your posting this and my response. I only check in on these forums infrequently these days.