Align text CSS/HTML - html

Question

This is my HTML and CSS
.register {
background-color: red;
width: 500px;
float: left;
}
.login {
background-color: blue;
width: 500px;
float: left;
}
.log {
text-decoration: none;
font-family: 'Mulish', sans-serif;
font-size: 20px;
color: #fff;
}
<div class="submissions">
<div class="register"><a class="log" href="#" style="margin-right: 100px;">Register</a></div>
<div class="login"><a class="log" href="#" style="margin-left: 100px;">Login</a></div>
</div>
And the login text aligns in fact 100px with margin-right, but the register text doesnt align 100px with the margin-right, how can i fix this? Image shown below (Used red and blue colored divs for easier visualization.)

Answer 1

margin-right does not guarantee the element will be a certain distance from the right side of its parent, it only determines the minimum space reserved by the element on its right side.
See for yourself: the red element here is more than 10px from the right side of its parent div.
.container {
width: 100%;
height: 50px;
background-color: blue;
}
.child {
width: 20%;
height: 50px;
margin-right: 10px;
background-color: red;
}
<div class="container">
<div class="child"></div>
</div>
If you want the element to measure from the right side instead of the left, you can use the float property.
.container {
width: 100%;
height: 50px;
background-color: blue;
}
.child {
width: 20%;
height: 50px;
float: right;
margin-right: 10px;
background-color: red;
}
<div class="container">
<div class="child"></div>
</div>
See how the red element is now on the right side of its parent container? It is now exactly 10px from the edge because it still reserves that space using its margin-right.
The use of float is less common today because there are better ways to create most layouts. For simple uses like this, however, it might be the quick fix you're looking for.
Here's your code with the float property adjusted. I've selected the "Register" link using the compound selector .register > a which matches an anchor (a) tag that is the direct child of an element with the register class attribute.
.register {
background-color: red;
width: 500px;
float: left;
}
.register > a {
float: right;
}
.login {
background-color: blue;
width: 500px;
float: left;
}
.log {
text-decoration: none;
font-family: 'Mulish', sans-serif;
font-size: 20px;
color: #fff;
}
<div class="submissions">
<div class="register"><a class="log" href="#" style="margin-right: 100px;">Register</a></div>
<div class="login"><a class="log" href="#" style="margin-left: 100px;">Login</a></div>
</div>

Answer 2

What I understand from your question is that you are looking to achieve something similar to this Screenshot
To achieve this, I simply put text-align: right on the .register class.
Full code:
.register {
background-color: red;
width: 500px;
float: left;
text-align: right; //The only change
}
.login {
background-color: blue;
width: 500px;
float: left;
}
.log {
text-decoration: none;
font-family: 'Mulish', sans-serif;
font-size: 20px;
color: #fff;
}
<div class="submissions">
<div class="register"><a class="log" href="#" style="margin-right: 100px;">Register</a></div>
<div class="login"><a class="log" href="#" style="margin-left: 100px;">Login</a></div>
</div>
Try 'fullpage' version.