page not showing properly in firefox and explorer

Question

The problem is, I'm trying to test my template for all the browsers, it looks fine in Chrome (I use it primarily) but it looks off in Firefox and Explorer.

I tried to use prefixes, I used auto prefix in brackets to make sure everything is as it should. in Firefox, the background is not showing, and the search bar doesn't have the correct padding that I gave it. Same thing with explorer but the search bar is fine but the background not so much.

.header {
  background-image: url(images/headerimg.webp);
  background-size: cover;
  background-position: center;
  height: 300px;
  padding: 0;
  margin: 0;
  text-align: center;
}

.searchContainer {
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.search {
  padding: 7px 10px !important;
  border-radius: 0 4px 4px 0;
  font-size: 17px;
  border: 2px solid #363a5e;
  border-left: none;
  width: 360px;
  color: #666a8c;
  margin: 1px 0 0 -3px;
  background-color: #363a5e;
  -webkit-transition: .2s;
  transition: .2s;
}

<header class="header jumbotron" role="heading" aria-level="1">
  <div class="filter">
    <div class="container">
      <div class="mobileOpenContainer">&nbsp;
        <span onclick="openNav()" class="showNavSearch"><i class="fas fa-bars"></i></span>
        <span onclick="openSearch()" class="showNavSearch" id="search"><i class="fas fa-search"></i></span>
      </div>
      <div class="logoNavContainer" role="img">
        <a href=""><img class="logo" src="images/Logo.svg" alt="logo"></a>
        <nav>
          <ul class="navbar" role="navigation">
            <a href="#">
              <li class="nav">خانه</li>
            </a>
            <a href="#">
              <li class="nav">تبلیغات</li>
            </a>
            <a href="#">
              <li class="nav">تماس با ما</li>
            </a>
            <a href="#">
              <li class="nav">خرید قالب</li>
            </a>
          </ul>
        </nav>
      </div>
      <div class="reqSearchContainer">
        <button class="request" role="button"><i class="fas fa-film"></i>درخواست انتشار</button>
        <button class="request" role="button"><i class="fas fa-heart"></i>حمایت از ما</button>
        <div class="searchContainer">
          <label>
                            <input class="search" placeholder="جستوجو..." aria-label="Searchbar">
                            <a href="#"><span class="searchBtn" aria-label="Search button"><i class="fas fa-search"></i></span></a>
                        </label>
        </div>
      </div>
</header>

This is how it looks like in Chrome (how it should):

This is Firefox:

IE is the same as Firefox, but the search bar is fine.

Answer 1

Okay I found a way to do it, but it may not be the best for some who have the same problem as I had:

First of all, to be able to see the background, I had to update to Firefox 65+ because .webp is supported from that version, it seems (for IE, it doesn't support it at all, which is a shame, so I just changed it to jpg)

For the searchbar however, I didn't find any good way to fix the padding, so I just used height in CSS to give it fixed height and that also fixed that problem, but may not be the best option for some.