title: how to position a search bar in html/css
body: <p>This is my code so far:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="home_style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="header"&gt;
      &lt;div class="search_bar"&gt;
          &lt;input type="text" name="search" value="search"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>html,body{
  height:100%;
  min-height:100%; 
  width:100%
  min-width:100%;
  }
  
  .header{
  margin-bottom:0;
  height:10%; 
  width:100%;
  background-color:#343430;
  }
  
  .search_bar input[type="text"]{
  position:relative;  
  left:20%;
  top:25%;
  width:30%;
  
  background-color:white; 
  color:grey;
  }
  </code></pre>
  
  <p>How do I make the search bar be positioned further down, i need the search bar to be positioned in the middle of the header not the top. Why is top:25% not working?</p>