これらのアンカー要素をこのサイトのモバイル版の中心に置くにはどうすればよいですか？

私は書いたいくつかのアンカー要素のセンタリングに小さな問題があります。私はそれらをサイトのモバイル版に集中することはできません、彼らは少し左側に置かれているようです。モバイル版のサイトのスタイルを変更するために、@mediaクエリを使用しました。コードだこれらのアンカー要素をこのサイトのモバイル版の中心に置くにはどうすればよいですか？

：

HTML

<div id="page"> 
    <ul id="icons"> 
     <li><object type="image/svg+xml" data="images/pl.svg"></object></li> 
     <li><object type="image/svg+xml" data="images/gb.svg"></object></li> 
    </ul> 

    <img src="images/ryszard_final.png" alt="Ryszard Kukliński Logo" /> 

    <div id="buttons_div"> 

     <a href="biografia" class="btn1 btn1_float btn">BIOGRAFIA</a> 
     <a href="#" class="btn1 btn2_float btn">RECENZJA</a> 

     <div style="clear: both;" class="btn"></div> 

     <a href="#" class="btn1 btn1_float btn">O PROJEKCIE</a> 
     <a href="#" class="btn1 btn2_float btn">KOMIKS</a> 

    </div> 


    </div>

CSS

/****************** 
GENERAL 
******************/ 

body { 
    background-color: #1f1f2e; 
    color: white; 

    margin: 0; 
    padding: 0; 

    font-size: 100%; 
    font-family: 'Lato', sans-serif; 
} 
img { 
    max-width: 100%; 
} 
a { 
    text-decoration: none; 
    color: white; 
} 

/****************** 
MENU PAGE 
******************/ 
img { 
    display: block; 
    margin: 0 auto; 

    height: 20%; 
    width: 20%; 
    margin-bottom: 5%; 
    margin-top: 5px; 
} 
.btn1 { 
    font-family: 'Poppins', sans-serif; 
    font-weight: 600; 
    text-transform: uppercase; 

    text-align: center; 
    height: 15%; 
    width: 40%; 
    border-radius: 10px; 
    line-height: 70px; 
    cursor: pointer; 

    border: 3px solid #a20000; 
    display: block; 

    position: relative; 
    overflow: hidden; 
    background: transparent; 
    transition: 0.3s; 

    margin-bottom: 15%; 


} 
.btn1:before { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: #e60000; 
    opacity: .5; 
    top: -100%; 
    left: 0; 
    z-index: -1; 
    transition: 0.3s; 
} 
.btn1:after { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: #e60000; 
    top: -100%; 
    left: 0; 
    z-index: -1; 
    transition: 0.3s; 
    transition-delay: 0.2s; 
} 
.btn1:hover { 
    color: #fff; 
} 
.btn1:hover:before { 
    top: 0; 
} 
.btn1:hover:after { 
    top: 0; 
} 

.btn1_float { 
    float: left; 
} 
.btn2_float { 
    float: right; 
} 
#icons { 
    position: absolute; 
    right: 0; 
    list-style: none; 

    margin: 0; 
    padding: 0; 
    float: right; 

    margin-top: 10px; 
    margin-right: 5px; 
} 
#icons li { 
    display: inline-block; 
} 
object { 
    height: 16px; 
    width: 32px; 

} 

@media (max-width: 480px) { 
    #buttons_div { 
     width: 75%; 
     margin: 0 auto; 
} 
    .btn { 
     float: left; 
     width: 75%; 
    } 
} 

@media (min-width: 1000px) { 
    #buttons_div { 
     max-width: 65%; 
     margin: 0 auto; 
    } 
}

私はそれを中央にしようと、それだけでは動作しません。下の写真を見て、私の言いたいことを見てください： Page

ご覧のとおり、動作しません。すべてのボタンを左に押すだけです。誰でも助けてくれますか？

出典

2017-03-05 Karol Zientek