My design has 3 buttons that I want to always remain centered on the page, but they seem to skew off-center as the window widens (as shown in the image).
What HTML/CSS code can I use to ensure that these buttons are perfectly centralized at all times?
It appears that they skew more towards the left side, creating extra space on the right.
https://i.stack.imgur.com/lU8EA.png
<body>
<h1 class="title">Creative Checker</h1>
<div class="row">
<div class="col-12 col-md-10 offset-md-1">
<div class="alert alert-success" style="display: none">
</div>
<div class="alert alert-danger" style="display: none">
</div>
<div class="row">
<div class="col-md-12">
<p class="text-center">
1. Select product type:
</p>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-4">
<button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
</div>
<div class="col-lg-4">
<button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
</div>
<div class="col-lg-4">
<button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="text-center">
2. Upload folder/images:
</p>
<form action="server.php"
class="dropzone"
id="my-awesome-dropzone"
onsubmit="onSubmit()">
<!-- <select name="product-type" id="product_type">
<option value="snapshot">
Snapshot
</option>
<option value="TMD">
TMD
</option>
<option value="b-push">
Behavioural Push
</option>
</select> -->
</form>
</div>
</div>
</div>
</div>
#btn-snapshot {
z-index: 39;
width: 250px;
min-height: 15px;
background-color: #75ACE0;
border-radius: 20px;
position: relative;
}
#btn-tmd {
z-index: 39;
width: 250px;
min-height: 15px;
background-color: #75ACE0;
border-radius: 20px;
position: relative;
}
#btn-bpush {
z-index: 39;
width: 250px;
min-height: 15px;
background-color: #75ACE0;
border-radius: 20px;
position: relative;
}