again.
I am stuck with my search bar where it is not the position and the size i had coded in it.
Supposedly the search bar shall be look like in the following link: https://www.w3schools.com/howto/howto_css_searchbar.asp
But eventually, after i typed the coded, the search bar had different size and is not the position i wanted to be. here is the image below: 
Your help is much appreciated as i am still learning in this programming languages.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="footer.php">
<!-- ---------------------------------------START OF CSS -------------------------------- -->
<style>
/*----------------------START OF CSS PAGE BACKGROUND-----------------*/
body {
background-color: white;
font-size: 20px;
margin: 0;
}
/*----------------------END OF CSS PAGE BACKGROUND-----------------*/
/*----------------------START OF CSS STICKY NAVBAR AND DROPDOWN BUTTONS-----------------*/
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
/* overflow: hidden; */
background-color: #38444d;
min-height: 45px;
position: -webkit-sticky;
/*Safari */
position: sticky;
top: 0;
}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box;} body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #e9e9e9; } .topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: #2196F3; color: white; } .topnav input[type=text] { float: right; padding: 6px; margin-top: 8px; margin-right: 16px; border: none; font-size: 17px; } @media screen and (max-width: 600px) { .topnav a, .topnav input[type=text] { float: none; display: block; text-align: left; width: 100%; margin: 0; padding: 14px; } .topnav input[type=text] { border: 1px solid #ccc; } } </style> </head> <body> <div class="topnav"> <a class="active" href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> <input type="text" placeholder="Search.."> </div> <div style="padding-left:16px"> <h2>Responsive Search Bar</h2> <p>Navigation bar with a search box inside of it.</p> <p>Resize the browser window to see the responsive effect.</p> <p>For more examples on how to add a submit button and icon inside the search bar, go back to the tutorial.</p> </div> </body> </html>