I need help with centering a dropdown menu on my webpage. I followed the instructions, but it's still appearing next to the button instead of in the center.
Below is the code snippet:
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" id="timezoneDropdown" data-bs-toggle="dropdown"
aria-expanded="false">
What timezone are you in?
</button>
<ul class="dropdown-menu" aria-labelledby="timezoneDropdown">
<li><button class="dropdown-item">GMT</button></li>
<li><button class="dropdown-item">UTC</button></li>
<li><button class="dropdown-item">ECT</button></li>
<li><button class="dropdown-item">EET</button></li>
<li><button class="dropdown-item">ART</button></li>
<li><button class="dropdown-item">EAT</button></li>
</ul>
</div>