I am facing an issue with centering a div horizontally inside another div. Here is my HTML code:
.block {
padding: 0px 20px;
max-width: 820px;
margin: 0 auto;
background-color: #ff0;
}
.container {
margin: 0 auto;
display: inline-block;
background-color: red;
padding: 5px;
}<div class="block">
<div class="container">
<button>£10</button>
<button>£20</button>
<button>£30</button>
</div>
</div>This setup results in the red div being aligned to the left instead of being centered inside the yellow div.
To visualize, it currently looks like this:
https://i.sstatic.net/eNWSi.png
If you want to take a look at the actual codepen, here's the link: https://codepen.io/carlrippon/pen/MWwaORv?editors=1111
Note that I only need compatibility with IE11 and newer versions, not older ones.