title: Creating a search bar with CSS (button not attached to search box)
body: <p>I am learning how to create a search-bar with CSS and came across two issues:</p>
  
  <ol>
  <li><p>My button has this unwanted blue gap on the right side (this is because I tried to add a arrow to stick out of the left).</p>
  
  <p>I have tried different methods to get rid of the large area of blue, but i do not have enough experience to figure out why this is happening.</p></li>
  <li><p>The search button is not meeting with the bar on the left side of the button, it has a gap.</p></li>
  </ol>
  
  <p>If anyone has an idea to the cause please mention it.</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form {
    width: 500px;
    margin: 50px auto;
  }
  .search {
    padding: 8px 15px;
    background: rgba(50, 50, 50, 0.2);
    border: 1.5px solid #dbdbdb;
    width: 100px;
  }
  .button {
    position: relative;
    padding: 6.5px 15px;
    left: -8px;
    border: 2px solid #207cca;
    background-color: #207cca;
    color: #fafafa;
  }
  .button:hover {
    background-color: #fafafa;
    color: #207cca;
  }
  ::-webkit-input-placeholder {
    /* For WebKit browsers */
    color: #dd3333;
    font-family: Helvetica Neue;
    font-weight: bold;
  }
  :-moz-placeholder {
    /* For Mozilla Firefox 4 to 18 */
    color: #dd3333;
    font-family: Helvetica Neue;
    font-weight: bold;
  }
  ::-moz-placeholder {
    /* For Mozilla Firefox 19+ */
    color: #dd3333;
    font-family: Helvetica Neue;
    font-weight: bold;
  }
  :-ms-input-placeholder {
    /* For Internet Explorer 10+ */
    color: #dd3333;
    font-family: Helvetica Neue;
    font-weight: bold;
  }
  /*bar arrow-main*/
  
  .arrow {
    position: relative;
    background: #207cca;
    padding: 8px 8px;
    left: -8 px;
  }
  .arrow:after {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: rbga(32, 124, 202, 0);
    border-right-color: #207cca;
    border-width: 10px;
    margin-top: -10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;input type="text" placeholder="Search..." class="search" required="required" /&gt;
    &lt;span class="arrow"&gt;&lt;input type="button" value="Search" class= "button"/&gt;&lt;/span&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is <a href="https://jsfiddle.net/x2m3911x/44/" rel="nofollow">JSFiddle link</a> too.</p>