Why child div not floating to the right side?

Question

Here is my code:

.header{
    display: flex;
    justify-content: center;
    height: 60px;
}

.header .header-content{
    display: flex;
    align-items: center;
    height: 100%;
    width: 70%;
}

.menu{
    float: right;
}

ul{
    list-style: none;
}

li{
    display: inline;
    margin-left: 40px;
}

<div class="header">
    <div class="header-content">
        <div class="logo">
            <img src="logo.png" alt="" srcset="">
        </div>
        <div class="menu">
            <ul>
                <li>All Courses</li>
                <li>Interactive Courses</li>
                <li>Sign Up Free</li>
            </ul>
        </div>
    </div>
</div>

Why the div with class name 'menu' is not floating to the right side?

I would like that div to float to the right side of its parent.

Thank you.

Your content is floated to the right, however the enclosing div `header-content` is only 70% width and centered in its parent, causing your menu to appear centered. — Rodentman87, Jul 09 '20 at 06:50

score 0 · Answer 1 · answered Jul 09 '20 at 02:31

If you only have two elements in .header-content you can use flexbox to put space between them:

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

.header .header-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 70%;
}

Why child div not floating to the right side?

1 Answers1