there is an empty space next to the banner-CodePudding

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 >
            <div >
                <div >
                    <h1 ></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 >
            <div >
                <a href="" target="_blank" hidden></a>
                <input type="text"  placeholder="Pick a topic, person, something">
                <div >
                    <!-- here list are inserted from javascript -->
                </div>
                <div ><i ></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;
  }

CodePudding user response：

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

CodePudding user response：

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%;
}