Responsive design with @media screen-CodePudding

i want to build a responsive website/navigation like shown in this example: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_responsive

This is my try:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, Helvetica, sans-serif;
}
.clearfix::after {
    content:"";
    clear:both;
    display:table
}

/* Header bzw. Navigation */
.clearfix {
    width: 100%;
    height: 80px;
    background-color: lightgray;
}
.logo {
    height: inherit;
    width: 80px;
    float: left;
    padding: 10px;
}
ul {
    list-style-type: none;
}
li {
    float: right;
    padding: 31.2px 20px;
}
a:link, a:visited {    
    text-decoration: none;
    color: black;
}
li:hover {
    border-bottom: 2px solid black;
    height: 80px;
}
@media screen and (max-width: 700px) {
    .logo, .li {
        float: none;
    }
}

<!DOCTYPE html>
<html lang="de">
<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="style.css">
</head>
<body>
    <header>
        <div >
                
            <div >
                <a href="">
                    <img width="60px" src="pictures/airbnb2.png" alt="Airbnb Logo"> 
                </a>
            </div>

            <nav>
                <ul>
                    <li><a href="">Log-in</a></li>                 
                    <li><a href="">Registrieren</a></li>
                    <li><a href="">Hilfe</a></li>
                    <li><a href="">Gastgeber werden</a></li>
                </ul>
            </nav>

        </div>
    </header>
</body>
</html>

So the problem is that the list-elements don't switch to block-elements. They stay connected in one line. How can i solve this problem?

Im very new to html/css... Is it important to learn float?

CodePudding user response：

Youre making a mistake in your media css, you are calling .li, instead of calling the li element like this:

@media only screen and (max-width: 700px) {
    .logo,
    li {
        float: none;
    }
}

Edit to fix the order without float, you will have to take a different approach.

set your .clearfix css:

.clearfix {
    display: flex;
}

then do the following:

.logo, nav {
    width: 50%;
}
ul {
    display: flex; 
    width: 100%;
}