How can I remove the gray background that automatically appears in my CSS header?
.header {
padding: 60px;
margin: 20px auto auto auto;
width: 1400px;
border-radius: 10px;
text-align: center;
background: #1abc9c;
color: white;
}
body {
background: #f2f2f2;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 4500px;
border: 3px solid #1abc9c;
border-right: none;
padding: 5px;
height: 50px;
border-radius: 5px 0 0 5px;
outline: none;
color: #fff;
}
.searchTerm:focus {
color: black;
}
.searchButton {
width: 50px;
height: 50px;
border: 1px solid #1abc9c;
background: #1abc9c;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
margin: auto;
}<div class="header">
<h1 style="font-size: 100px;">HI</h1>
<p style="font-size: 30px;">
Hello
</p>
</div>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" id="input_text" />
<button type="submit" class="searchButton" onclick="send_text()">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="search"></div>Thanks!
After adding this CSS and HTML, a gray background starts appearing around the header. Interestingly, when the code for the search bar is commented out, the gray background around the header disappears completely.