Witam mam problem z inputami bo chciałem sobie zrobić pasek wyszukiwania żeby byl obok inputa na wpisanie słowa. nierozumiem tego za bardzo mam dużo inputów na stronie bo chcę formularz do logowania i formularz do szukania ale utkwiem. prosze o wyrozumiałość jestem poczatkujący.
<!Doctype HTML>
<html lang="pl">
<head>
<meta charset="">
<title>Burning Stone MMO-RPG - Official Forum</title>
<meta charset="utf-8"/>
<meta name="description" content="Burning Stone MMO-RPG - Official Forum"/>
<meta name="keywords" content="Burning Stone MMORPG, Forum"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Stigman Magros" />
<link rel="stylesheet" href="styles/forum.css" />
</head>
<body>
<header id="main-header">
<h1>Burning Stone MMO-RPG</h1>
<p>Official Forum for Game Creators</p>
</header>
<nav id="main-nav">
<form class="left-form">
<input class="login" type="text" name="login" placeholder="Login">
<input class="password" type="password" name="Passowrd" placeholder="Passowrd">
<input class="btn" type="button" name="button" value="Login">
<input class="btn" type="button" name="button" value="Create">
</form>
<form class="right-form">
<input class="serach" type="text" name="serach" placeholder="Serach">
<input class="serach-btn" type="button" value="🔍">
</form>
</nav>
<main>
</main>
</body>
</html>
oraz css
*{
margin: 0;
padding: 0;}
body{
background-color: #34495e;
font-family: monospace, sans-serif;
font-size: 22pX;
color: #ecf0f1;}
#main-header{
background-color: #3498db;
font-size: 26pX;
text-align: center;
padding: 25pX 10pX;}
#main-nav{
background-color: #2c3e50;
height: 77pX;}
.left-form{
padding: 5pX 0pX 0pX 25pX;
float: left;}
.login, .password{
padding: 10pX 5pX 10pX 10pX;
width: 150pX;
background: #ecf0f1;
margin: 15pX 0pX 0pX 0pX;
border: #3498db solid 2pX;}
.btn{
padding: 10pX;
width: 100pX;
color: #ecf0f1;
background-color: #3498db;
border: none;
border-radius: 2pX;
font-size: 16pX;}
.right-form{
float: right;
padding: 5pX 20pX 0 0pX;}
.serach{
padding: 10pX 10pX 10pX 10pX;
width: 150pX;
background: #ecf0f1;
margin: 15pX 0pX 0pX 0pX;
border: #3498db solid 2pX;}
.serach-btn{
width: 55pX;
font-size: 20pX;
padding: 3pX 5pX 1pX 5pX;
background-color: #3498db;
border: none;
border-radius: 2pX;
color: #ecf0f1;}
a chciałem żeby pomiędzy polem na wpisanie hasła i pomiędzy przyciskiem żeby niebyło odstępu tylko były ze sobą zlepione. odrazu doradźcie mi jakie błędy popełniłem bo wciąż się ucze