the code are messed up in a few resolution - html

Question

I am checking my website different resolutions and browsers using Dev Tools and www.responsinator. in the web site I have used the owl Carousel, but in iPhone XR (414896) or iphone 12 pro (390844) or samsung galaxy (412 * 912) it is messed up.
in real it is like this
but on those resolution it is like this
this is the code for this part:
.cart-col {
width: 100%;
padding: 10px;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
display: inline-block;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.cart-title {
font-size: 13px;
font-family: IRANSans;
font-weight: bold;
padding-right: 7px;
display: inline-block;
}
.btn-filter {
background-color: #ffffff;
font-size: 14px;
outline: none;
cursor: pointer;
border: 1px solid #ccc;
vertical-align: middle;
width: 100px !important;
float: right;
margin-right: 15px;
margin-top: 15px;
}
.btn-filter>a {
color: #ccc;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.btn-filter>a:hover {
color: black;
}
.img-filter {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.filter-title {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
display: inline-block;
margin-top: 20px;
}
.filter-option {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
}
<!-- ----- Bootstrap-4 ----- -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- ----- Body ------------ -->
<div class="col-lg-2 col-md-2 col-sm-12 mr-1 ml-2 cart-col fixed" style="height:650px;">
<div class="cart-title">Filter </div>
<div>
<hr /> </div>
<div class="filter-title">Select the options </div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">0-2 </a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">3-5 </a>
</div>
</div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">6-8</a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">8-12 </a>
</div>
</div>
<div>
<div class="filter-title">Select the type </div>
<div>
<select class="form-control filter-option" id="BookType" asp-items="#ViewBag.BookType">
<option value="">vocal </option>
</select>
</div>
</div>
<div>
<div class="filter-title">select the subject </div>
<div>
<select class="form-control filter-option" id="BookSubject" asp-items="#ViewBag.BookSubject">
<option value="">comic</option>
</select>
</div>
</div>
<div class="img-filter"><img src="~/images/filter.jpg" /> </div>
how can I make adjustable for this resolution
Update
=============================
I checked my code and I found that I have search input in my layout
<form asp-action="Index" asp-controller="Products" method="get" class="form-inlineflex">
<input type="search" class="header-search-input d-inline-flex" name="SearchKey">
<div class="action-btns d-inline-flex ">
<button class="btn btn-search" type="submit">
<i class="bi bi-search "></i>
</button>
</div>
</form>
with CSS:
.header-search-input {
background: #f0f0f0;
font-size: 12px;
height: 24px;
padding: 0;
outline: none;
}
if I remove this class from input box, so everything will be ok in any resolution and browser, but things will be messy in a few resolution as soon as I set that class to the inputbox
can anyone give me a clue for the reason?