锚定按钮两侧需要边距

Question

以下是我的问题的图片：

如果你看我的按钮一直对齐到各自的两侧。我需要在左侧和右侧有一些边缘，所以它们不会一直对齐到那边。 我尝试添加margin-left和margin-right，但没有做任何事情

这是我的CSS：

.profileinfo {
        position: relative;
        background-color: #202020;
        box-sizing: border-box;
        padding: 20px 20px 25px 20px;
        -webkit-overflow-scrolling: touch;
}

.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;
}

a.genericbuttonright {
        right: 0;
        margin: 0;
        width: 360px;    
}

a.genericbuttonleft {
        left: 0; 
        margin: 0;
        width: 360px;                  
}

这是我的HTML：

<div class="profileinfo">
<h1></h1>
<br>
<a class="genericbuttonleft" data-ripple-color="#ffffff" onclick="animateripple(event,this)" href="/profile/search">Search Profiles</a>
<a class="genericbuttonright" data-ripple-color="#ffffff" onclick="animateripple(event,this)" href="/profile/create">Create a Profile</a><br><br>
</div>

Answer 1

只需更改左/右值。

Codepen Demo

a.genericbuttonright {
        right: 10px; /* here */
        margin: 0;
        width: 360px;    
}

a.genericbuttonleft {
        left: 10px;  /* here */
        margin: 0;
        width: 360px;                  
}