How to align navbar elements seperately-CodePudding

I want my "Home" link to be aligned to the left and the "Log in" and "Sign up" links aligned to the left. I was following a tutorial on navbars and got stuck here. This problem wasn't faced by the tutorial maker. I'm not even able to align all elements to the right.

index.html

<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Hardcore Parkour</title>
</head>
<body>
    <header>
    <div class="navbar">
        <nav>
            <ul>
                <a href=""><img src="HPLogo.png" alt="Hardcore Parkour" class="logo"></a>
                <li><a href="">Home</a></li>
                <li><a href="log_in.html">Log in</a></li>
                <li><a href="sign_up.html">Sign up</a></li>  
            </ul>
        </nav>
    </div>
    </header>
</body>

I've tried using a seperate div for "Home" in the nav tag. In the nav li section, It doesn't seem to change anything if I change margin-right to margin-left, the outcome is the same for some reason. Below is the css stylesheet.

style.css

body{
    margin: 0;
    font-family: 'Bungee', cursive;
    color:rgb(255, 255, 255);
    background: slateblue;
}

img{
    width: 10%;
}

header{
    background-color: rgb(0, 0, 0);
}

header::after{
    content: '';
    display: table;
    clear: both;
}

.navbar{
    width: 95%;
    margin: 0 auto;
}

.logo{
    float:left;
}

nav{
    float:right;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li{
    display:inline-block;
    margin-right: 20;
    padding-top: 21;
    padding-left: 300;
}

nav a{
    color: yellow;
    text-decoration: none;
}

CodePudding user response：

You can use position property to align items differently. Please refer https://www.w3schools.com/css/css_positioning.asp for position property

Or you can use flex property. I would recommend you to use flex. Please refer https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for a guide on flex.

CodePudding user response：

body{
        margin: 0;
        font-family: 'Bungee', cursive;
        color:rgb(255, 255, 255);
        background: slateblue;
    }
    
    img{
        width: 10%;
    }
    
    header{
        background-color: rgb(0, 0, 0);
    }
    
    header::after{
        content: '';
        display: table;
        clear: both;
    }
    
    nav{
       display: flex;
        width: 95%;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
    }
    
    nav ul{
        list-style: none;
        
    }
    
    nav ul li{
        display:inline;
        margin-right: 20px;
    }
    
    nav a{
        color: yellow;
        text-decoration: none;
    }

<html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Hardcore Parkour</title>
    </head>
    <body>
        <header>
            <nav>
            <a href=""><img src="HPLogo.png" alt="Hardcore Parkour" class="logo"></a>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="log_in.html">Log in</a></li>
                    <li><a href="sign_up.html">Sign up</a></li>  
                </ul>
            </nav>
        </header>
    </body>
    
</html>

The way you can achieve this is by using flex. Set the display of the navbar to flex and then align the items to the center by using align items attribute. In order to move the element to the left and right just use the justify content:space between; and then you can use margin to align your items.You can also increase the spacing between Home Login and Sign Up buttons by increasing the margin in nav ul li.

CodePudding user response：

If you wants to set all elements to the right then simply add "ms-auto" in the ul tag.