Struggling to center align two buttons on my website, none of the common methods seem to work. It's becoming a headache as nothing else is overriding it. Perhaps I'm missing something.
This is my CSS button code:
.btn {
border-radius: 10px !important;
font-size: 16px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
.btn-primary {
background-color: #346cfc !important
}
.btn-secondary {
background-color: #346cfc !important;
}
And this is my HTML code:
</nav>
<div class="heading">
<h1 class="display-5 title"></i>Ricky</h1>
<p class="subtitle">Ricky is a multi purpose bot with features like Music, Economy, Utility, and more!<br />Check out the <a href="https://docs.partywumpus.com">docs</a> or get started below.</p>
<a class="btn btn-primary btn-lg text-center"href="https://discord.com/oauth2/authorize?client_id=778817321640394762&scope=bot&permissions=2147483647" target="_blank" role="button">Invite</a>
<a class="btn btn-secondary btn-lg text-center"href="https://discord.gg/XXBpY2v6AU" target="_blank" role="button">Support Server</a>
<br /><br /><br /><br /><br /><br />
I did manage to make it work by setting position relative, but it doesn't look good on mobile depending on the top and left % values.
.btn-primary {
position: relative;
top: 50%;
left: 50%;
background-color: #7289DA !important
}
Any suggestions for a better way to achieve proper alignment without sacrificing appearance on PC or mobile?