CSS add margin to one element in menu - html

Question

I'm wondering how to add a left-margin to the most right element in
the menu without changing HTML code.
MY CODE:
ul {
float: right;
list-style-type: none;
margin-top: 25px;
margin-right: 115px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none !important;
padding: 5px 20px;
border: 1px solid #000;
color: #000;
transition: 0.4s ease;
font-size: 20px !important;
}
ul li a.li-login {
text-decoration: none !important;
position: relative;
margin-left: 10px;
padding: 5px 10px;
color: #000;
transition: 0.4s ease;
font-size: 16px !important;
border: none;
}
ul li:nth-child(5){
margin-left: 20px;
}
<header>
<div class="main">
<ul>
<li>Home</li>
<li>EndlessBlow</li>
<li>My projects</li>
<li>About</li>
<li *ngIf="!isLogged"><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
<li *ngIf="isLogged"><input type="submit" class="a-login" value="Logout" (click)="doLogout()"></li>
</ul>
</div>
</header>
what the output I have:
but I need to add margin to have space like in the image below:
How can I achieve that with CSS?

Answer 1

You need:
width:100%;
text-align: center;
in your ul and
.a-login {
margin-left: 50px;
}
.a-login {
margin-left: 50px;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
margin-right: 115px;
width:100%;
text-align: center;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none !important;
padding: 5px 20px;
border: 1px solid #000;
color: #000;
transition: 0.4s ease;
font-size: 20px !important;
}
ul li a.li-login {
text-decoration: none !important;
position: relative;
margin-left: 10px;
padding: 5px 10px;
color: #000;
transition: 0.4s ease;
font-size: 16px !important;
border: none;
}
<div class="main">
<ul>
<li>Home</li>
<li>EndlessBlow</li>
<li>My projects</li>
<li>About</li>
<li *ngIf="!isLogged"><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
<li *ngIf="isLogged"><input type="submit" class="a-login" value="Logout" (click)="doLogout()"></li>
</ul>
</div>

Answer 2

you've many options but my choice would be number 1:
1
ul li:last-child {
margin-left: 30px;
}
2
ul li:nth-last-child(2) {
margin-right: 30px;
}
3
ul li a[href="/about"] {
margin-right: 30px;
}
4
ul li:nth-child(4) {
margin-right: 30px;
}
5
ul li:nth-child(5) {
margin-left: 30px;
}

Answer 3

You can use the pseudo-class called nth-child(n), with this class you can select a child element based on the number n, in the code below you select the five li element which is a child and add a margin to it, now you can add styles only to the 5 li element.
ul {
float: right;
list-style-type: none;
margin-top: 25px;
margin-right: 115px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none !important;
padding: 5px 20px;
border: 1px solid #000;
color: #000;
transition: 0.4s ease;
font-size: 20px !important;
}
ul li a.li-login {
text-decoration: none !important;
position: relative;
margin-left: 10px;
padding: 5px 10px;
color: #000;
transition: 0.4s ease;
font-size: 16px !important;
border: none;
}
ul li:nth-child(5){
margin-left: 20px;
}
<header>
<div class="main">
<ul>
<li>Home</li>
<li>EndlessBlow</li>
<li>My projects</li>
<li>About</li>
<li *ngIf="!isLogged"><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
<li *ngIf="isLogged"><input type="submit" class="a-login" value="Logout" (click)="doLogout()"></li>
</ul>
</div>
</header>