联系表格和页脚样式问题

Question

我的联系表单和页脚出现一些样式问题：我希望页脚div顶部的border-top分隔联系表单和页脚。但是，页脚的border-top被推到联系表单的顶部而不是页脚的顶部

如果我删除了联系表，则border-top就应该放在其中...我已经附加了图片（因为代码段没有做我的样式，所以远远没有正义）

#contact-text-title {
	color: #5CDB95;
}

.left-grid, .right-grid {
  	width: 49%;
  	float: left;
  	margin-top: -2%;
}

.left-grid {
 	margin-right: 1%;
 }

.right-grid {
  	margin-left: 1%;
}

#mobile-contact-content {
	display: none;
}

form {
	width: 98%;
}

textarea, input, #contact-text {
	font-family: Quicksand;
	font-size: 16px;
}

label {
	display: block;
	padding: 1rem 0 .5rem;
	text-transform: uppercase;
	font-size: 18px;
	font-family: Karla;
}

input, textarea {
	display: block;
	width: 100%;
	border: 1px solid black;
	padding: .5rem;
	font-family: Montserrat;
	font-weight: 300;
}

textarea { 
	height: auto; 
	resize: none;
}

button {
	font-family: Montserrat;
	font-size: 18px;
	border: 1px solid #379683;
	padding:.5rem;
	width: auto;
	margin-top: 15px;
	background-color: #379683;
	color: #FFF;
}

button:hover {
	cursor: pointer;
	color: #379683;
	border-color: #379683;
	background-color: #FFF;
}

#contact-text {
	display: table-cell;
    text-align: center;
    vertical-align: middle;
    line-height: 48px;
    height: 500px;
}

footer {
	font-size: 12px !important;
	height: 25px;
}

footer p {
	border-top: 1px solid black;
}

footer .logo {
	font-size: 18px !important;
	border: 0px solid black;
	text-align: left;
	width: 50%;
	float: left;
	margin-bottom:30px;
}

footer #facebook {
	font-size: 18px !important;
	text-align: left;
	width: 50%;
	float: left;
	margin-bottom:30px;
	margin-top:17px;
	color: #05386B;
}

footer #facebook:hover {
	cursor: pointer;
}

<div class="col">
        <div id="contact-block">
            <div id="header">
                <h4>Contact.</h4>
            </div>
             <div id="mobile-contact-content">
                <p class="content-text">Do you have an idea for your garden or driveway?</p>
                <p class="content-text"><span>We want to hear about it!</span></p>
                <p class="content-text">Use the contact form to get in touch with us!</p>
            </div>
            <div class="left-grid">
                <form action="/" id="contact-form" method="post" role="form">
                    <div class = "label">
                        <label for="name" class="formText">Name:</label>
                    </div>
                        <input id="name" name="name" type="text" placeholder="Your name" required="required">
                    <div class = "label">
                        <label for="email" class="formText">Email:</label>
                    </div>
                        <input id="email" name="email" type="text" placeholder="Your email" required="required">
                    <div class = "label">
                        <label for="message" class="formText">Message:</label>
                    </div>
                        <textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
                    <div>
                         <button type="submit">Send</button> 
                    </div>   
                 </form>
            </div>
            <div class="right-grid" id="contact-box">
                 <div id="contact-text">
                    <p><span id="contact-text-title">Have a new project idea?</span>
                    <br>Use the contact form to tell us about it and we will get in touch with you</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <footer>
            <p><span class="logo" style="text-align:left;">Rob Moore LTD</span><span id="facebook" style="text-align:right;"><i class="fab fa-facebook-f fa-lg"></i></span>
            </p>
        </footer>
    </div>

Answer 1

将float：left设置为.col。

.col {
    float: left;
}

并添加宽度：100％；到包含页脚的最后一个.col。