<form> HTML标记仅会破坏Google Chrome上的导航栏

Question

根据标题，我使用HTML标记为我的网站创建联系表单。当我使用表单标签时，我的导航栏仅在Google Chrome上失去了它的位置。

我在联系页面上有一张Firefox v Chrome布局的照片。

排名第一的是Chrome。底部是FF。

正如您所看到的，导航栏已在Chrome上移动，但代码是相同的！

以下是此页面的HTML / CSS代码的一部分。

<header class="header">
        <div class="container">
            <a href="index.html">
                <div id="logo">
                    <h1 id="l1">l1</h1>
                    <h1 id="l2">l2</h1>
                    <h2 id="l3">l3</h2>
                    <h3 id="l4">l4</h3>
                </div>
            </a>

            <div id="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="pprojects.html">Personal Projects</a></li>
                    <li><a href="resume.html">Résumé</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
        </div>
    </header>

    <div class="subheader">
        <h2>
            Contact
        </h2>
    </div>

    <div class="middle">

        <div class="main-text">
            <p id ="required">
                * Denotes required field.
            </p>

            <form id="con-form" method="post" action="contactsheet.php">
                <label>Name*</label>
                <input type="text" name="name" placeholder="">

                <label>Email*</label>
                <input type="text" name="email" placeholder="">

                <label>Subject</label>
                <input type="text" name="subject" placeholder="">

                <label>Message</label>
                <textarea name="message" cols="40" rows="5" placeholder="" id="last-box"></textarea>

                <label>What is 2+2? (Anti-spam)*</label>
                <input type="text" name="human" placeholder="">

                <input id="submit" name="submit" type="submit" value="Submit">
            </form>
        </div>

CSS：

.header {
    background-color: #283F51;
    height:176px;
    width:100%;
    min-width: 1229px;
    margin: 0 0 0 0;
    border-style:none;
}

.header .container {
    margin-left:auto;
    margin-right:auto;
    width:1214px;
    position:relative;
    padding-top:50px;
    padding-left:15px;
}

.header .container #menu {
    display: inline;
    float:right;
    text-transform: uppercase;
    padding:0;
    margin-top:70px;
}

/*Further down*/

.middle {
    display:block;
    margin:0 auto 0 auto;
    width:1214px;
    overflow:auto;
    padding-left:15px;
    padding-bottom:35px;
    background-color:white;
}

.middle .main-text {
    width:750px;
    float:left;
    margin: 15px 0 0 20px;
    font-family:Lato, Arial, sans-serif;
    font-size:16px;
    color:#424242;
}

代码应该是正确的，因为它适用于FF但不适用于Chrome。我试图移除导航栏上的浮动并使用位置移动它，但它在FF上不能很好地对齐:(如果有人可以帮助我们，我会很多地使用它。