How to center align a table on page and elements inside the table

.extensions-table { margin-left: auto; margin-right: auto; th, td { width: 8rem; text-align: center; } } 

<div class="container"> <h2>Get started</h2> <p class="lead">Codever is a bookmark and code snippets manager created and designed for Developers & Co. The following helpers and extensions will assist you along the way: <table class="extensions-table"> <thead> <tr> <th align="center"><a href="https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb" rel="nofollow"><img src="./assets/img/bookmark-48.png" alt="Bookmark" ></a> </th> <th align="center" ><a href="https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb" rel="nofollow"><img src="./assets/img/chrome-48.png" alt="Chrome logo" ></a> </th> <th align="center" ><a href="https://addons.mozilla.org/addon/codever/" rel="nofollow"><img src="./assets/img/firefox-48.png" alt="Firefox logo" ></a> </th> <th align="center" ><a href="https://addons.mozilla.org/addon/codever/" rel="nofollow"><img src="./assets/img/intellij-48.png" alt="IntelliJ Logo" ></a> </th> </tr> </thead> <tbody> <tr> <td align="center" ><a href="https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb" rel="nofollow">Bookmarklet</a></td> <td align="center" ><a href="https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb" rel="nofollow">Chrome</a></td> <td align="center" class="ml-2"><a href="https://addons.mozilla.org/addon/codever/" rel="nofollow">Firefox</a></td> <td align="center" class="ml-2"><a href="https://plugins.jetbrains.com/plugin/14456-codever-snippets/" rel="nofollow">IntelliJ plugin</a></td> </tr> </tbody> </table> </div>