Question 1: I need assistance in making this search box responsive. Every time I try to adjust the screen width, the button ends up below the input field. How can I resolve this issue?
Question 2: Is there a way to horizontally center the div class="search_box" without utilizing display: flex; justify-content: center; in the parent div?
Below is a snippet of my code:
<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaca1a1babdbabcafbe8efbe0ffe0fd">[email protected]</a>/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 class="parent">
<div class="search_box">
<input class="search_box_items" type="text" placeholder="Search...">
<button class="search_box_items" type="submit">Search</button>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d322d30">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>