无法让柔性盒处于响应状态？

Question

灵活盒不会得到太多的响应，直到分辨率下降太多，因为它应该是......这可能是什么原因？ 我得到的是通过检查何时删除display:flex所以它似乎正在解决，但问题是搜索按钮不会停留在搜索输入的同一行然后转到第二行无论如何我都不想让它保持响应，同时保持输入和搜索按钮在一行中就像它现在一样???

input[type=text].icon {
  flex-grow: 4;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url(searchicon.png);
  background-position: 10px 13px;
  background-repeat: no-repeat;
  padding-left: 42px;
}

h1 {
  font-family: Arial;
  opacity: 0.6;
  text-align: center;
}

span {
  font-size: 70%;
}

.footer {
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #eee2e2;
  margin-top: 10.5%;

}

body {
  overflow-x: hidden;
}

p {
  text-align: center;
  font-family: Arial;
  opacity: 0.7;
}

a {
  text-decoration: none;
}

.btn-secondary:hover {
  color: #292b2c;
  background-color: #e6e6e6;
  border-color: #adadad;
  cursor: pointer;
}

.btn:focus,
.btn:hover {
  text-decoration: none;
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button;
}

.btn-secondary {
  color: #292b2c;
  background-color: #fff;
  border-color: #adadad;
}

.search {
  flex-grow: 1;
  margin-left: 5px;
  border: 1px solid turquoise;
  padding: 1.2% 1.5rem;
  font-size: 1.8rem !important;
  border-radius: .25rem;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

<div style="padding: 7%;margin-top: 100px;">
        <h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1>
        <form class="flex" action="get_torrents.php" method="post">
            <input class="icon" name="search" id="search" placeholder="Search Torrent Name" type="text"> <input class="btn btn-secondary search" name="submit" type="submit" value="Search">
        </form>

这是截图：

LIVE PAGE LINK： http://huntedhunter.com/extratorrent/