title: Form labels outside of form borders after floting it right
body: <p>I've tried to float a form right inside a div container. The form contains two inputs: a label and a button. After that I noticed that the two labels outside under the borders of the form; not inside of it. How to solve this problem? 
  The code is as follows:
  html</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;a href="index.php"&gt;&lt;img id="brand" alt="brand" src="img/brand1.png"&gt;&lt;/a&gt;
          &lt;form id="search-form" class="ccc"&gt;
              &lt;input id="search-field"  name="s" placeholder="Find apartments (enter city, zip, state or country)" class="search-form_it" type="text"&gt;&lt;/input&gt;
              &lt;input id="search-button" type="submit" value=""&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/input&gt;
          &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#search-field{
  border: medium none;
  margin-top:25px;
  margin-right:25px;
  background-color: transparent;
  max-width:350px;
  width:100%;
  height: 50px;
  box-shadow: none;
  font-size: 12px;
  color: #F04122;
  padding: 6px 10px !important;
  box-sizing: border-box;
  }
  #search-button{
  position:absolute;
  display:block;
  right: 50px;    
  border: medium none;
  background-color: transparent;
  }
  #search-form{
  position:relative;
  display:block;
  max-width: 500px;
  width: 100%;
  height:30px;
  display:inline;
  padding:6px;
  border-radius:0px;
  border: 2px solid white;
  float:right;}
  </code></pre>
  
  <p>The result is like this</p>
  
  <p><a href="https://i.stack.imgur.com/aHF9j.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aHF9j.jpg" alt="enter image description here"></a></p>