Выравнивание два якоря бок о бок

Question

Вот изображение моего текущего прогресса:

Как вы можете видеть, анкеры aligining сами incorrectly.They должны быть equidistanct от друг друга и выровнены симметрично.

Что я делаю неправильно, что мне нужно сделать, чтобы два якорных элемента правильно выравнивались слева направо, и правый якорь явно выдвинулся.

Я предпочел бы не должны изменять позиционирование

a.genericbuttonleft { 
 
    position: static; 
 
    margin: 0px; 
 
    //float:left; 
 

 
} 
 
a.genericbuttonright { 
 
    position: static; 
 
    margin: 52%; 
 
    //float:right; 
 

 
} 
 
.profileinfo { 
 
    position: relative; 
 
    background-color: #202020; 
 
    box-sizing: border-box; 
 
    padding: 20px 20px 25px 20px; 
 
    -webkit-overflow-scrolling: touch; 
 
} 
 
.profileinfo h1 { 
 
    font: 40px/45px'HelveticaNeue-Light', sans-serif-light; 
 
    color: #ffffff; 
 
    margin: 0; 
 
} 
 
.profileinfo a { 
 
    position: absolute; 
 
    right: 30px; 
 
    top: 34px; 
 
    display: block; 
 
    width: 260px; 
 
    box-sizing: border-box; 
 
    padding: 18px 0 16px 0; 
 
    font: 25px/25px'-apple-system', BlinkMacSystemFont, 'HelveticaNeue', Roboto; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: #ffffff; 
 
    background-color: #13cc3a; 
 
    border: 0; 
 
    border-radius: 5px; 
 
    margin: 10px auto; 
 
    overflow: hidden; 
 
}

<div class="profileinfo"> 
 
    <h1><!-- this needs to stay here even though not being used --></h1> 
 
    <a class="genericbuttonleft">Search Profiles</a> 
 
    <a class="genericbuttonright">Create a Profile</a> 
 
</div>

Answer 1

Держи

a.genericbuttonleft { 
 
    margin: 0px; 
 
    left: 0; 
 
} 
 
a.genericbuttonright { 
 
    right: 0; 
 
} 
 
.profileinfo { 
 
    position: relative; 
 
    background-color: #202020; 
 
    box-sizing: border-box; 
 
    padding: 20px 20px 25px 20px; 
 
    -webkit-overflow-scrolling: touch; 
 
} 
 
.profileinfo h1 { 
 
    font: 40px/45px'HelveticaNeue-Light', sans-serif-light; 
 
    color: #ffffff; 
 
    margin: 0; 
 
} 
 
.profileinfo a { 
 
    position: absolute; 
 
    top: 34px; 
 
    display: block; 
 
    width: 260px; 
 
    box-sizing: border-box; 
 
    padding: 18px 0 16px 0; 
 
    font: 25px/25px'-apple-system', BlinkMacSystemFont, 'HelveticaNeue', Roboto; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: #ffffff; 
 
    background-color: #13cc3a; 
 
    border: 0; 
 
    border-radius: 5px; 
 
    margin: 10px auto; 
 
    overflow: hidden; 
 
}

<div class="profileinfo"> 
 
    <h1><!-- this needs to stay here even though not being used --></h1> 
 
    <a class="genericbuttonleft">Search Profiles</a> 
 
    <a class="genericbuttonright">Create a Profile</a> 
 
</div>