您提供的HTML和CSS不匹配。有<div class="seacrh">和.container {}。我将假设这应该是相同的类名，并且我将使用正确的拼写“search”。
正如已经评论过的，裁剪是由于定位声明。这是没有它的情况：

body {
  background-color: #1e4bdd;
  background: linear-gradient(105deg, #f2eeee, #0808d4);
}

.search {
  text-align: justify;
  background-color: #ffffff;
  font-size: 16px;
  padding: 01.5em 1.8em;
  width: 90vw;
  max-width: 100em;
  /* position: relative; */
  /* transform: translate(-50%, -50%); */
  /* left: 50%; */
  /* top: 50%; */
  border-radius: 0.6em;
  background: linear-gradient(55deg, #940ce9, #a88bc9);
}

.image {
  border-radius: 50%;
  border: #1e4bdd;
  /* float: center; */
}

个字符
本例建议使用flexbox将图像定位在标题和搜索框旁边。通过将标题和搜索框嵌套在div中，div和图像可以并排放置。

body {
  background-color: #1e4bdd;
  background: linear-gradient(105deg, #f2eeee, #0808d4);
}

.seacrh {
  display: flex;
  align-items: center;
  /* text-align: justify; */
  background-color: #ffffff;
  font-size: 16px;
  padding: 01.5em 1.8em;
  width: 90vw;
  max-width: 100em;
  /* position: relative; */
  /* transform: translate(-50%, -50%); */
  /* left: 50%; */
  /* top: 50%; */
  border-radius: 0.6em;
  background: linear-gradient(55deg, #940ce9, #a88bc9);
}

.image {
  border-radius: 50%;
  border: #1e4bdd;
  /* float: center; */
}

<div class="seacrh">
  <div>
    <h2> Meal app by Garvit</h2>
    <input type="text" placeholder="Type A NOM NOM Dish.." class="inputBox" />
    <button class="inputBtn">Search</button>
  </div>
  <img class="image" src="//picsum.photos/150" width="150" height="150">
</div>

的字符串

你可以用这个替换你的代码。它应该会起作用。我已经包含了两个css类header-titles和header-image

<div class="seacrh">
    <h2 class="header-titles"> Meal app by Garvit </h2>
    <img class="header-image" src = "heading.jpg" width="150" height="150">
    <input type="text" placeholder="Type A NOM NOM Dish.." class="inputBox"/>
    <button class="inputBtn">Search</button>
</div>

字符串
这是两个CSS类。

.header-titles{
  width:50%;
  text-align: left;
  float: left;
}
.header-image{
  float: left;
}

型