HTML social button issue-CodePudding

Im adding social buttons

to my site. but they are not centered on top of each other.

Tried to do <center> but doesn't do anything.

Herees my html code that im using

  <div id="footer">
    <a  href="https://discord.gg/DvXbGPdZ85"><i ></i></a>
    <a  href="mailto:[email protected]"><i ></i></a>
    <a  href="https://twitter.com/AlphatronGames"><i ></i></a>
    <a  href="https://www.instagram.com/alphatrongames/"><i ></i></a>
    <br><br>
    <a  href="https://discord.gg/DvXbGPdZ85"><i ></i></a>
    <a  href="mailto:[email protected]"><i ></i></a>
    <a  href="https://twitter.com/AlphatronGames"><i ></i></a>
    <a  href="https://www.instagram.com/alphatrongames/"><i ></i></a>
  </div>

Heres the css code that Im using.

.btn_social {
    font-size:18px;
    color:#fff;
    margin:40px 20px;
    padding:15px 18px;
    border-radius:50%;
    background:#000;
    transition:0.4s ease-in-out;
}
.btn_social:hover {
    color:#000;
    background:#fff;
    cursor:pointer;
}

@media (max-width: 900px){
    .btn_social {
        font-size:14px;
        margin:10px;
        padding:10px 11px;
    }
}

Not sure what to do or if its a problem with the icons but any help is appreciated.

CodePudding user response：

Nav? or just Button?

using class=id"", and css argument each elements

CodePudding user response：

Can you add your HTML, and CSS code to the question?