Hi guys, I'm here again with my psd to html / css template.
now i have a strange issue is simple to explain but difficult to deal with.
i have tow tags (.iconSearch and search classes ) in one form, and i want to float them at right but when i do that, i get an extra margin in top despite i set 0 on margin-top, this the code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body , html{
            height : 100%;
            width : 100%;
            margin: 0;
            padding :0;
        }
        body
        {
            height : 100%;
            width : 100%;
            background-color : #d0d0d0;
            padding : 0 20px;
            box-sizing : border-box;
        }

        * , *::before , *::after
        {
            box-sizing : inherit;
        }
        .container
        {
            background-color : #ffffff;
            border-top : 10px solid #894aa3;
            /*border-bottom : 55px solid #444444;*/
            height : 100%;
            width : 100%;
            margin: 0;
            display : table;
            /*padding : 0 30px;*/
            position : relative;
        }

        .iconSearch
        {
            background-color : #ebebea;
            background-image : url("../img/searchIcon.png");
            background-repeat: no-repeat;
            background-size : 15px 15px;
            background-position: center;
            width : 28px;
            height : 28px;
            border-radius: 0 0 7px 0;
            margin : 0 30px auto auto;
            float : right;
            border : 0;

        }

        .search
        {
            margin: 0;
            float : right;
            width : 188px;
            height: 28px;
            border : 0px;
            background-color: #ebebea;
            border-radius: 0 0 0 7px;
        }

    </style>
</head>
<body>
<form>
    <div class="container">
        <header>
            <form>
                <input class="iconSearch" type="submit" value=""/><input class="search" type="text"/>
            </form>
            <h2 class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </h2>
            <span class="utopic-flowers2">free PSD webSite template</span>
            <ul class="navbartop">
                <li><a href="#">home</a></li>
                <li><a href="#">style demo</a></li>
                <li><a href="#">full width</a></li>
                <li><a href="#">dropdown</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">gallery</a></li>
            </ul>
            <div class="headerText">
                <p>Veniam ipsum laboris adipisicing anim aliquip occaecat qui amet exercitation dolor culpa. Voluptate
                    excepteur pariatur adipisicing cupidatat exercitation occaecat do consequat culpa ea duis proident.</p>
            </div>
        </header>
    </div>
</form>
</body>
</html>

thank you in advance.

It's a margin of

            <h2 class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </h2>

try to replace e.g.

            <b class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </b>

and you will see that the extra margin of input element disappears