对齐两个按钮和占位符查询之间的空间

Question

i have two doubts. First one is added two buttons on top. how can i align the space between two buttons? secondly i added a text box and given placeholder as search. but in output browser is showing the last letter 'h'.I added an output image below. I am a beginner in html and css. Sincere help will be appreciated. [![

 *{ padding: 0px; margin: 0px; } header{ background-color: black; height: 100px; }.menu{ display: flex; flex-direction: row; justify-content: space-between; padding: 40px; color: #fff; }.menu ul { list-style: none; display: flex; margin-left: 180px; }.menu ul li a{ color: white; text-decoration: none; margin: 20px; font-size: 24px; }.btn{ margin-right: 250px; }.btn1 { background-color: #4C5FD5; width: 90px; height: 50px; border: 1px solid #fff; border-radius: 7px; color: #fff; font-size: 17px; font-weight: 600; box-shadow: none; }.btn1:hover{ background-color: #fff; color: black; transition: 0.3s ease; cursor: pointer; }.herosec{ text-align: center; }.content{ background-color: #dadbf1; height: 400px; }.content h1{ padding-top: 80px; font-size: 80px; padding-bottom: 40px; }.content input{ width: 450px; height: 40px; font-size: 20px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style?css"> </head> <body> <header> <div class="menu"> <ul> <li><a href="#">Abstract</a></li> <li><a href="#">Help center</a></li> </ul> <div class="btn"> <button class="btn1">Submit</button> <button class="btn1">Signin</button> </div> </div> </header> <hero class="herosec"> <div class="content"> <h1>How can we help?</h1> <input type="text" placeholder="search"> </div> </hero> </body> </html>

] 1 ] 1