Trouble aligning button with input

Question

I've tried to align the button submit and the search input but I doesn't work and I don't get to understand why. I have this styling code:

input[type=search] 
    border: none
    cursor: text
    padding: 0
    border: 1px solid #cfcfcf
.search-main input, .search-main button
    height: 30px
    display: inline-block

.search-main button 
    background: #55e0a8
    border: none
    width: 18%
    margin-left: -7px
    display:inline-block

.search-main input
    width: 80%

and this html:

<form method="get" class="search-main">
    <input name="q" type="search">
    <button type="submit"></button>
</form>

and here's what I get:

Here's the online version

So, pretty silly question, but since I've been trying for more than 40+ minutes, thought I would try to post it here. I've been playing with firebug, padding, margins, and I don't get where the problem comes from.

Answer 1

You can try -

.search-main > button {
float: right;
}