White space after anchor tag

Hey i am trying to make a navbar again and I have declared that the anchor tag have display block but white space appear Here isy HTML code=

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
                <meta charset="UTF-8">
                <title>Page title</title>
                <link rel="stylesheet" href="css.css"></link>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <script src="css.js"></script>
                <script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
                <nav>
                            &#10240;<span class="title">Nav</span>
                                <span class="menu-btn">
                                                <label for="nav-btn"><i class="fas fa-bars"></i></label>
                                                <input type="checkbox" name="" id="nav-btn">
                                </span>
                                <div class="nav-links">
                                                <a href="#">Home</a>
                                                <a href="#">About</a>
                                                <a href="#">Contact Us</a>
                                                <a href="#">Feedback</a>
                                </div>
                </nav>
</body>
</html>

And this is CSS code

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
body {
     margin: 0;
     padding: 0;
}
nav {
                background: black;
                width: 100% !important;
                color: white;
                height: 76px;
                line-height: 76px;
                padding-right: 10px;
                font-size: 20pt !important;
}
.nav-links a {
                font-size: 20px;
                text-decoration: none;
}
#nav-btn, label{
                display: none;
}
@media(min-width: 600px){
                .nav-links a {
                                color: white;
                }
                .nav-links{
                                float: right;
                                justify-content: space-between;
                }
                .nav-links a:hover{
                                background-color: white;
                                color: black;
                                padding-top: 2.5px;
                                padding-bottom: 2.5px;
                                border-radius: 5px;
                                padding-right: 2.5px;
                                padding-left: 2.5px;
                }
                nav {
                                /*display: flex;*/
                }
                .title, .nav-links{
                                display: inline;
                }
}
@media(max-width: 599px){
                label {
                                display: inline;
                                float: right;
                }
                .extra{
                                display: none;
                }
                .nav-links{
                                text-align: center;
                                display: block;
                }
                .nav-links a {
                                display: block;
                                
                }
}

And the white space is only appear in mobile devices so please help me i need it fast⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀