Full Width Search Box Form Over Image Using CSS

Question

I'm trying to build a Full Width Search Box Form Over Image Using CSS and here's the HTML code I tried. can you help why the output is not showing the search form 100%. I want it responsive (the form width changes while changing the window.)

Complete code for below,

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type=text] {
  height: 25px;
  border: 1px solid;
  border-color: #FFFFFF;
  text-align: right;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 3px;
  background-color: transparent;
  width: 100%
}

textarea:focus,
input:focus {
  color: #FFFFFF;
}

input,
select,
textarea {
  color: #FFFFFF;
}

<div class="container">
  <img src="ban.png" style="width:100%;">
  <div class="centered">
    <form method="get" action="https://www.google.com/search" target="_blank">
      <input type="text" value="Find more" name="q" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
      <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />

      <input type="hidden" name="sitesearch" value="mydomain.com" />
    </form>
  </div>
</div>

Answer 1

All I did was give width: 100% to your .container in your css file, and give a width: inherit to your .centered class as in my comment.

Here's the full code:

.container {
  width: 100%;
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  width: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type=text] {
  height: 25px;
  border: 1px solid;
  border-color: #FFFFFF;
  text-align: right;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 3px;
  background-color: transparent;
  width: 100%;
}

textarea:focus,
input:focus {
  color: #FFFFFF;
}

input,
select,
textarea {
  color: #FFFFFF;
}

<div class="container">
  <img src="https://thumbs.dreamstime.com/b/abstract-nature-autumn-background-yellow-leaves-gold-78033112.jpg" style="width:100%;">
  <div class="centered">
    <form method="get" action="https://www.google.com/search" target="_blank">
      <input type="text" value="Find more" name="q" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
      <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />

      <input type="hidden" name="sitesearch" value="mydomain.com" />
    </form>
  </div>
</div>