How to make my this search box responsive in html and css and horizontally center the search

Question 1: Can any one tell me please how can I make this search box responsive? Because when I trying to change the width of the screen the button comes to below the input field.

Question 2: How to horizontally center the div div without using display: flex; justify-content: center; in parent div?

Here is my code snippet:

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
  rel="stylesheet" integrity="sha384- 
  1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Search Box</title>

  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
   body{
    background-color: rgb(233, 175, 98);
  }
  .parent{
    display: flex;
    justify-content: center; 
    /*See the question number 2*/
  }
  .search_box{
    background-color: white;
    width: 465px;
    height: 50px;
    border-radius: 4px;
    margin-top: 50px;
  }
  .search_box_items{
    border: none;
    border-radius: 4px;
  }
  input{
    width: 370px;
    height: 50px;
    padding-left: 10px;
  }
  button{
    width: 85px;
    height: 43px;
    color: white;
    background-color: rgb(84, 152, 230);
  }
  button:hover{
    background-color: rgb(70, 147, 235);
  }
  button:active{
    background-color: rgb(33, 129, 240);
  }
    </style>

   </head>
   <body>

   <div >

     <div >

       <input  type="text" placeholder="Search...">

       <button  type="submit">Search</button>

     </div>

   </div>

   <!-- Option 1: Bootstrap Bundle with Popper -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
   integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" 
    crossorigin="anonymous"></script>
  </body>
  </html>

CodePudding user response：

Firstly: html:

<div >
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i ></i></button>
    </form>
  </div>

css:

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}

Do like this & see magic

   <!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 >
  <a  href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <input type="text" placeholder="Search..">
</div>



</body>
</html>

CodePudding user response：

.parent{
    #display: flex;
    #justify-content: center;
    margin: auto;
    width: 50%
    /*See the question number 2*/
  }