can anyone help with my codes? I cant align the search button...
HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <title>Awesome Search Box</title> </head> <body> <div class="search-box"></div> <input class="search-txt" type="text" name="" placeholder="Type to search"> <a class="search-btn" href="#"></a> <i class="fas fa-search"></i> </body> </html> CSS CODE body { margin: 0; padding: 0; background: #e84118; } .search-txt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background:#2f3640; height: 40px; border-radius: 40px; padding: 10px; } .search-button{ position: absolute; color: #e84118; float: right; width: 40px; border-radius: 50%; background: #2f3640; display: flex; justify-content: center; align-items: center; }