I'm making a responsive GitHub Homepage Clone (<https://github.com/>) with HTML and CSS before moving on to JS. I'm currently working on a search bar. However, when I narrow the screen from the left side, the search bar width stays the same, causing the search bar to leave the entire left navigation bar. Any help would be greatly appreciated :)
P.S. Please view the code snippet at full page view

```css
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f6f8fa;
    font-family: Helvetica, sans-serif;
}

#left-menu {
    background-color: white;
    width: 25%;
    display: flex;
    flex-direction: column;    
}

#left-menu-items {
    margin: 40px 15px 300px 25px;
    width: 85%;
}

#left-menu input {
    background-color: transparent;
    border: solid 1px #e1e4e8;
    border-radius: 5px;
    outline: none;
    margin-bottom: 20px;
    padding: 8px 113px 8px 10px;
}

#left-menu input::placeholder {
    color: #d2d5d8;
    font-size: 15px;
}
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/735c9ee1fa.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>GitHub Homepage</title>
</head>
<body>
    <section id="left-menu">
        <div id="left-menu-items">
            <input type="search" placeholder="Find a repository...">
        </div>
    </section>
</body>
</html>
```