Centered buttons appear correctly in preview, but not when published

[Xiokraze]

Hello,

I have a group of linline-block buttons in a div group that centers them. When I look at the preview, they appear correctly on the page:

However, after publishing, they go back to this, regardless of the page width:

Relevant Code:

.buttons {
  color: white;
  width: 250px;
  padding: 20px;
  border: 2px solid white;
  border-radius: 4px;
  background-color: black;
  display: inline-block;
}

.buttonGroup {
  text-align: center;
}

<div class="buttonGroup">
  <button type="button" class="buttons" onclick="showTable()">Standard Armor</button>
  <button type="button" class="buttons" onclick="showWeaponsTable()">Standard Weapons</button>
  <button type="button" class="buttons" onclick="showAmmoAndFocus()">Ammo/Focus/Symbol</button>
  <button type="button" class="buttons" onclick="showAdventureGear()">Adventure Gear</button>
</div>

If you need any additional information, please let me know! 

Thanks all

Edit: The buttons are inserted using the Embed Code builder tool, not the standard weebly button.

[whitemonkey]

Wow i love this code. On desk top does it show side by side? And on top of each other on smart phone view? How is the link made in that code u supplied??

[Xiokraze]

What do you love about it? =D

[whitemonkey]

i like playing around with bits of coding for the embed element.... i wanna learn about over-rides too...

https://www.nomadicbackpacker.com

[Xiokraze]

I definitely prefer embedding, that way I can get exactly what I want. I find the Weebly options great for overall structure and whatnot, but also being able to pinpoint the layout and design you want through embedding is great!

[whitemonkey]

agreed but aint it slow?   re page loading speed.

so on these buttons, where do u put the link .?

[whitemonkey]

this is what i get on a tablet...:

top part of code went in the mains.less    bottom part as embed.

no idea on how to link the buttons...

[Bernadette3]

I assume this is happening because the default view is to stack each item in one row. Is there a reason why you want all of the buttons to show up on a row on a mobile device. My phone is pretty narrow and I can't imagine it would be easy to 1) read the text and 2) click on the individual button. That said, if you want to force the buttons in a row you can try using the Column Lock app. I'm sure there's some code that will also achieve the look, but I'm not able to assist with that. 

https://www.weebly.com/app-center/column-lock?ref=ac-search

[Xiokraze]

I have the buttons set to wrap so as the screen gets smaller, they stack on top of each other.

As for the original issue, it appears that it was something to do with Weebly. After waiting awhile, it started functioning how I wanted it to.