이 앵커 요소를이 사이트의 모바일 버전에 가운데에 배치하는 방법은 무엇입니까?

필자가 작성한 일부 앵커 요소를 중심에 배치하는 데 작은 문제가 있습니다. 사이트의 모바일 버전에만 센터를 배치 할 수는 없지만 조금 왼쪽에 배치 된 것처럼 보입니다. 모바일 버전 용 사이트 스타일을 변경하려면 @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