<节>后的空白区域

元素 ：悬停和 .active 高于正常值

您可以在HIVER和活动的"底部边距：-1px"中使用;

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ul.topnav {
	list-style-type: none;
	/*position: fixed; */
	overflow: hidden;
	margin: 0;
	padding: 0 0 0 400px;
	background-color: #110E0C;
   /*width: 100%;
   top: 0; */
}
ul.topnav li {
	float: left;
}
ul.topnav li a {
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;
	padding: 14px 30px;
	text-transform: uppercase;
	/*background-color: #3F4345;*/
}
ul.topnav li a:hover {
	background-color: #C8D0D7; 
	color: #D8610C;
	border-bottom: 1px solid #D8610C;
  
  margin-bottom: -1px;
}
ul.topnav li a.active {
	background-color: #C8D0D7;
	color: #D8610C;
	border-bottom: 1px solid #D8610C;
  margin-bottom: -1px;
}
ul.bottom-nav {
	list-style-type: none;
	/*position: fixed; */
	overflow: hidden;
	margin: 0 0 -40px 0;
	padding: 0 0 0 400px;
	background-color: #110E0C;
	/*width: 100%;
   top: 0; */
}
ul.bottom-nav li {
	float: left;
}
ul.bottom-nav li a {
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;
	padding: 14px 30px;
	text-transform: uppercase;
	/*background-color: #3F4345;*/
}
ul.bottom-nav li a:hover {
	background-color: #C8D0D7; 
	color: #D8610C;
	border-bottom: 1px solid #D8610C;
}
ul.bottom-nav li a.active {
	background-color: #C8D0D7;
	color: #EA6E00;
	/* border-bottom: 1px solid #D8610C; */
}

header {
	width: 100%;
	padding: 2px;
	color:black;
	background-color: #EBEEF1;
	text-align: center;
	overflow: hidden;
}
header img {
	
	height: 150px;
	width: 150px;
	margin-left: 900px; 
	float:left;
	
}
header p {
	padding: 40px;
}
.section-1 {
	background-color: #333333;
	height: 425px;
}
.section-1 img {
	border: 1px solid white;
	width: 500px;
	height: auto;
}
.section-1 h3 {
	color: white;
	padding-bottom: 10px;
	text-align: center;
}
.section-1 p {
	color: white;
	width: 600px;
	padding: 0;
	margin: 0;
	line-height: 20px;
}
.main-topic {
	display: table;
	border: 2px solid green;
	margin: 0 auto;
}
.left-text{
	display: table-cell;
	vertical-align:middle;
	background-color: #632712;
	border: 5px solid #F1F0F0;
}
.right-picture{
	display: table-cell;
}
.right-picture > img{
	display: block;
}
.clear{
	clear: both;
}
.section-2 {
	background-color: #EBEEF1;
	height: 574px;
}
.col-1 {
	position: relative;
	top: -72px;
	left: -7px;
	float:left;
	width: 506px;
	height: 245px;
	/* margin: 10px; */
	border: 1px solid rgba(230, 231, 232, 0.55);
	margin: 28px 0 0 403px;
}
.col-2 {
	position: relative;
	top: -44px;
	left: -355px;
	float: left;
	width: 506px;
	height: 245px;
	/* margin: 10px; */
	border: 1px solid rgba(230, 231, 232, 0.55);
	margin: 0 0 0 434px;
}
.col-3 {
	position: relative;
	top: -4px;
	left: -355px;
	float: left;
	width: 506px;
	height: 245px;
	/* margin: 10px; */
	border: 1px solid rgba(230, 231, 232, 0.55);
	margin: 0 0 0 434px;
}
.col-4 {
	position: relative;
	top: -250px;
	left: -38px;
	float: left;
	width: 506px;
	height: 245px;
	/* margin: 10px; */
	border: 1px solid rgba(230, 231, 232, 0.55);
	margin: 0 0 0 434px;
}
.caption {
	text-align: left;
	background-color: #C8D0D7;
}
.caption h4 {
	padding: 20px 0 20px 20px;
	font-size: 30px;
	font-weight: bold;
}
.caption p {
	text-indent: 2em;
	font-style: italic;
	font-weight: bold;
}
.caption button {
	background-color: black;
	color:white;
	margin: 10px 0 0 15px;
}
.col-4 > .caption > ul {
	padding: 0 0 0 30px;
	list-style-image: url("http://nadeausoftware.com/sites/nadeausoftware.com/files/bullets/arrow_10x10_large.png");
	font-weight: bold;
	line-height: 2;
}
.col-3 > .caption > ul {
	padding: 0 0 0 30px;
	list-style-image: url('smile.png');
	font-weight: bold;
	line-height: 2;
     color:black;
}
.nav {
	margin-bottom: 0;
}

<body>
	<nav>
		<ul class="topnav">
			<li><a class="active" href="#home">home</a></li>
			<li><a href="#hospitalitystaff">hospitality staff</a></li>
			<li><a href="#whychooseus">why choose us</a></li>
			<li><a href="#testimonials">testimonials</a></li>
			<li><a href="#faq">faq</a></li>
			<li><a href="#termsandconditions">terms and conditions</a></li>
			<li><a href="#contactus">contact us</a></li>
			
		</ul>
	</nav>
	<header>
		<img src="https://s-media-cache-ak0.pinimg.com/564x/02/10/26/0210268f040d46c1bb46e4b31087da61.jpg">
		<p>Call Us Now <br> 020 7183 3263</p>
	</header>
	<section class="section-1">
		<div class="main-topic">
			<div class="left-text">
				<div class="left-text-background">
					<h3>Deadpool Fans Petition 'SNL' for Superhero to Host</h3>
					<p>
						Deadpool fans want its superhero to host Saturday Night Live — Deadpool, that is, not Ryan Reynolds. Fans of the Merc With a Mouth, who led the Marvel film to a history-making debut at the box office, have launched a Change.org petition calling for the antihero to host an upcoming episode of the NBC sketch comedy show. "We've all seen the trailers, the magazine covers, the viral videos, and the billboards by now, so what's left for Deadpool (Ryan Reynolds) to do?" creator Andrew Stege asks in the petition, which is directed to SNL, creator Lorne Michaels, parent.
					</p>
				</div>
			</div>
			<div class="right-picture">
				<img src="http://cdn3.whatculture.com/wp-content/uploads/2015/10/f5S3dvUb.jpg">
			</div>
			
		</section>
		<section class="section-2">
			
			<div class="col-1">
				<div class="caption">
					<h4>Hospitality Staff</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
					<button type="button">Read More</button>
					
				</div>
			</div>
			<div class="col-2">
				<div class="caption">
					<h4>Catering</h4>
					<p>&nbsp; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
					<button type="button">Read More</button>
				</div>
			</div>
			<div class="col-3">
				<div class="caption">
					<h4>Testimonials</h4>
					<ul class="list-upcomma">
						<li><p>Benchmark-quality staff</p></li>
						<li><p>Don't metter how hard you try</p></li>
						<li><p>Find the best solution</p></li>
						<li><p>Try your best</p></li>
						<li><p>Or just fuck it, you will die anyway</p></li>
					</ul>
					<button type="button">Read More</button>
				</div>
			</div>
			<div class="col-4">
				<div class="caption">
					<h4>Why Choose Us: </h4>
					<ul class="ul arrow">
						<li>Benchmark-quality staff</li>
						<li>Don't metter how hard you try</li>
						<li>Find the best solution</li>
						<li>Try your best</li>
						<li>Or just fuck it, you will die anyway</li>
					</ul>
				</div>
			</div>
			
		</section>
        <div class="clear"> </div>
		<nav class="navigation">
			<ul class="bottom-nav">
				<li><a class="active" href="#home">home</a></li>
				<li><a href="#hospitalitystaff">hospitality staff</a></li>
				<li><a href="#whychooseus">why choose us</a></li>
				<li><a href="#testimonials">testimonials</a></li>
				<li><a href="#faq">faq</a></li>
				<li><a href="#termsandconditions">terms and conditions</a></li>
				<li><a href="#contactus">contact us</a></li>
			</ul>
		</nav>