并排对齐两个锚

Question

Here is an image of my current progress:

As you can see, the anchors are aligining themselves incorrectly.They should be equidistanct from eachother and aligned symmetrically.

What am I doing incorrectly that I need to be doing to get the two anchor elements to align correctly left to right, having the right anchor pushed up obviously.

I'd prefer to not have to alter the positioning

 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

Here you go

 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>