It's important to note that float does not work on elements with a display property of flex. In this case, your .side-nav element has a display of flex, so changing it to block will solve the issue.
However, I would recommend avoiding the use of float altogether. Float is primarily intended for layouts like those found in newspapers, and using it to structure elements was more of a workaround due to the lack of flexbox support.
Instead, consider sticking with either float or flexbox, or better yet, position the close icon absolutely to remove it from the document flow:
*{
box-sizing: border-box;
}
html {
background-color: #dfdfdf;
}
body {
padding: 0;
margin: 0;
}
.navbar {
display:flex;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color:white;
}
.navbar-links ul{
display:flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li a{
text-decoration: none;
color:white;
display: block;
padding: 1rem;
}
.toggle-button {
position: absolute;
top: .75rem;
left: 1rem;
width: 30px;
height: 21px;
display:flex;
flex-direction: column;
justify-content: space-between;
display: none;
}
.toggle-button .bar {
background-color:white;
width: 100%;
height: 3px;
}
.side-nav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #9ed39f;
overflow: hidden;
transition: 0.5s;
display: flex;
}
.side-nav .btn-close {
font-size: 36px;
border-bottom: none;
text-decoration: none;
color: #fff;
margin-right:25px;
position: absolute;
right: 0;
}
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Responsive Sidebar</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="logo">Brand Name</div>
<div class="navbar-links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Abvout</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="side-nav">
<a href="#" class="btn-close">×</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<main>
epturi, quod illo. Voluptatum
alias possimus ipsum omnis. Aspernatur animi debitis natus sed
exercitationem repudiandae excepturi, ipsum hi
</main>
</body>
</html>
NOTE: The correct syntax is box-sizing: border-box;, not box-sizing: border;