I am creating a blogging website and designed a nav bar.The nav bar shows up in the left side and I want it in the top right corner..... I have tried by using justify-content:right; but it hasn't work...... How to get the nav bar to the right top corner? Help me out......
Here's the following snippet-
body {
background-color: #111;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
ul li a {
--c: rgb(178, 218, 32);
color: var(--c);
font-size: 16px;
border-radius: 0.5em;
width: 12em;
height: 3em;
text-transform: uppercase;
font-weight: bold;
font-family: sans-serif;
letter-spacing: 0.1em;
text-align: center;
line-height: 3em;
position: relative;
overflow: hidden;
z-index: 1;
transition: 0.5s;
margin: 1em;
float: left;
text-decoration: none;
}
ul li span {
position: absolute;
width: 25%;
height: 100%;
background-color: var(--c);
transform: translateY(150%);
border-radius: 50%;
left: calc((var(--n) - 1) * 25%);
transition: 0.5s;
transition-delay: calc((var(--n) - 1) * 0.1s);
z-index: -1;
}
ul li a:hover {
color: black;
}
ul li a:hover span {
transform: translateY(0) scale(2);
}
ul li a span:nth-child(1) {
--n: 1;
}
ul li a span:nth-child(2) {
--n: 2;
}
ul li a span:nth-child(3) {
--n: 3;
}
ul li a span:nth-child(4) {
--n: 4;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<ul>
<li>
<a href="#">home <span></span><span></span><span></span><span></span> </a>
</li>
<li>
<a href="#">service <span></span><span></span><span></span><span></span> </a>
</li>
<li>
<a href="#">about <span></span><span></span><span></span><span></span> </a>
</li>
<li>
<a href="#">contact <span></span><span></span><span></span><span></span> </a>
</li>
</ul>
</body>
</html>
