there is an empty space next to the banner - html

Question

https://ibb.co/tL337vV
Look closely at the top right corner of the page you will see there is an empty space that I can't get rid of.
this only appears on actual phones and tablets not on desktop even if squeeze the browser.
<div class="banner">
<div class="banner-content">
<div class="banner-text">
<h1 class="welcoming"></h1>
</div>
</div>
</div>
*{
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
html, body {
margin: 0;
}
body {
background-color: rgb(255, 253, 250);
}
/*header*/
.banner {
background-color: rgb(153, 217, 234);
max-height: 200px;
}
.banner-content {
padding: 20px;
align-items: center;
}
.banner-text {
flex-grow: 1;
line-height: 1.4;
}
.welcoming {
color: aliceblue;
text-align: center;
font-weight: bold;
font-size: 120px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
text-transform: uppercase;
}
also you can see that the search bar isn't aligned properly, any suggestions?
<div class="wrapper">
<div class="search-input">
<a href="" target="_blank" hidden></a>
<input type="text" class="search-box" placeholder="Pick a topic, person, something">
<div class="autocom-box">
<!-- here list are inserted from javascript -->
</div>
<div class="icon"><i class="fas fa-search"></i></div>
</div>
</div>
.wrapper{
max-width: 810px;
margin: 150px auto;
}
.wrapper .search-input {
text-align: center;
margin: 15px;
}
.wrapper .search-input{
background: #fff;
width: 100%;
border-radius: 5px;
position: relative;
box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
font-family: 'Poppins', sans-serif;
}

Answer 1

Looks like something is causing an overflow on the page. One trick that I often use in such situation is going into dev tools and adding this style rule:
* {
background-color: rgba(2,2,240, 0.1) !important;
}
It lets you see every elements position and check which one is causing an overflow

Answer 2

Remove width: 100%; from your .wrapper .search-input class
Edit: I'm assuming you wanted to target your input field when applying the width: 100%;, so you could add this to your CSS:
.wrapper .search-box {
width: 100%;
}