How to align buttons horizontally?

Hey Martin,

Sorry for the slow reply. I’m currently on holiday during the UK half-term.

I see the HTML markup for the buttons (see below). You should set the container element to 100% width and you might find it easy to use Miceothemer’s CSS grid controls to make the buttons horizontal. This is a bit less straight forward that usual because there are divider elements between the buttons that are probably best targeted and set to display: none so the buttons fill the grid columns in the expected way.

You can also drag the heading to fill the width of all four columns you create with MT’s CSS grid controls.

<div class=&quot;fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-center fusion-content-layout-column&quot; style=&quot; display: grid; grid: auto / repeat(4, 1fr); &quot;><div class=&quot;fusion-text fusion-text-1&quot;><p style=&quot;text-align: center; font-size: 13px;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;>CHECK OUT THESE SERVICES AS WELL</font></font></p> </div><div style=&quot;text-align:center;&quot;><a class=&quot;fusion-button button-flat button-large button-default fusion-button-default button-1 fusion-button-span-yes fusion-button-default-type&quot; target=&quot;_self&quot; href=&quot;https://www.albruna-testplatform.com/autisme-centrum/re-integratieplan-bij-autisme/&quot;><span class=&quot;fusion-button-text awb-button__text awb-button__text--default&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;>Reintegration for autism</font></font></span></a></div><div class=&quot;fusion-separator fusion-full-width-sep&quot; style=&quot;align-self: center;margin-left: auto;margin-right: auto;margin-bottom:1px;width:100%;&quot;></div><div style=&quot;text-align:center;&quot;><a class=&quot;fusion-button button-flat button-large button-default fusion-button-default button-2 fusion-button-span-yes fusion-button-default-type&quot; target=&quot;_self&quot; href=&quot;https://www.albruna-testplatform.com/autisme-centrum/burn-out-coach-autisme/&quot;><span class=&quot;fusion-button-text awb-button__text awb-button__text--default&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;>Burnout coach autism</font></font></span></a></div><div class=&quot;fusion-separator fusion-full-width-sep&quot; style=&quot;align-self: center;margin-left: auto;margin-right: auto;margin-bottom:1px;width:100%;&quot;></div><div><a class=&quot;fusion-button button-flat button-large button-default fusion-button-default button-3 fusion-button-span-yes fusion-button-default-type&quot; target=&quot;_self&quot; href=&quot;https://www.albruna-testplatform.com/autisme-centrum/werken-met-autisme/&quot;><span class=&quot;fusion-button-text awb-button__text awb-button__text--default&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;>Working with autism</font></font></span></a></div><div class=&quot;fusion-separator fusion-full-width-sep&quot; style=&quot;align-self: center;margin-left: auto;margin-right: auto;margin-bottom:1px;width:100%;&quot;></div><div style=&quot;text-align:center;&quot;><a class=&quot;fusion-button button-flat button-large button-default fusion-button-default button-4 fusion-button-span-yes fusion-button-default-type&quot; target=&quot;_self&quot; href=&quot;https://www.albruna-testplatform.com/autisme-centrum/autisme-op-de-werkvloer/&quot;><span class=&quot;fusion-button-text awb-button__text awb-button__text--default&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;>Autism in the workplace</font></font></span></a></div></div>

Also, I see some styles that make the buttons sticky, so they overlap the text below. Might be worth removing that from whatever builder you are using.

@media screen and (min-width: 1025px) {
.awb-sticky.awb-sticky-large {
position: sticky;
top: var(–awb-sticky-offset, 0);
}
}

Finally, have you tried using the AI assistant in Microthemer to help with this? It can either advise you about things or implement changes directly. It’s not perfect, but can sometimes give you a quick answer / solution because it can inspect the page and a bit like a web developer opening up dev tools and looking at the HTML and current styles.

I hope that helps. Let me know if you’re still stuck.

Cheers,
Sebastian