Why doesn't margin-right set to auto work?-CodePudding

Can't apply margin-right:auto to an element with class item1 to maximize the margin of elements with item2 and item3 classes. Why doesn't it work, if the elements have the display:block and set the width property set?

I expected that the elements with the classes item2 and item3 would move all the way to the right.

<!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>Document</title>
    <link rel="stylesheet" href="css/style.min.css">
</head>

<body>

<header >
    <div >
        <nav >
            <ul > 
                <li ><a href="#" >social</a></li>
                <li ><a href="#" >logo</a></li>
                <li ><a href="#" >about</a></li>
            </ul>
        </nav>
    </div>
</header>


<style>
        

    html{
        font-size: 10px;
        font-family: 'Montserrat', sans-serif;
        background-color: #121212;
        box-sizing: border-box;
    }

    a{
        text-decoration: none;
    }

    ul{
        list-style: none;
    }

    .container{
        width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .nav__inner{
        height: 11.5rem;
        display: flex;
        justify-content: space-between;
        width: 1100px;
        align-items: center;
    }

    .nav-link-item{
        font-size: 2rem;
        color: white;
        display: block;
    }

    .item1{
        margin-right: auto;
    }


</style>

</body>

</html>

CodePudding user response：

Add margin-left:auto on second child.

 html {
                font-size: 10px;
                font-family: 'Montserrat', sans-serif;
                background-color: #121212;
                box-sizing: border-box;
            }

            a {
                text-decoration: none;
            }

            ul {
                list-style: none;
            }

            ul>li:nth-child(2) {
                margin-left: auto;
            }

            .container {
                width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
            }

            .nav__inner {
                height: 11.5rem;
                display: flex;
                justify-content: space-between;
                width: 1100px;
                align-items: center;
            }

            .nav-link-item {
                font-size: 2rem;
                color: white;
                display: block;
            }

            .item1 {
                margin-right: auto;
            }

  <header >
            <div >
                <nav >
                    <ul >
                        <li ><a href="#" >social</a></li>
                        <li ><a href="#" >logo</a></li>
                        <li ><a href="#" >about</a></li>
                    </ul>
                </nav>
            </div>
        </header>