我希望在文章部分的顶部和底部具有100px的填充，但是当我将其添加到CSS中时，仅在该部分的顶部具有200px的填充？因此，这部分文章中将100px放在彼此的顶部。我在这里做错什么，因为好像由于某种原因所有内容都未嵌套在该部分中？
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
.skip-link {
position: absolute;
left: -1000px;
top: 5px;
z-index: 999;
background: white;
color: black;
}
.skip-link:focus {
left: 0;
}
/* COMMON STYLES */
.clearfix:after {
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: 'Raleway', sans-serif;
font-size: 1.6rem;
}
ul {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
}
h1 {
font-size: 6.8rem;
font-weight: 700;
color: #333333;
}
h2 {
font-size: 3.9rem;
font-weight: 700;
color: #333333;
padding: 15px 0;
}
h3 {
font-size: 2.2rem;
color: #777777;
text-transform: uppercase;
padding: 30px 0 15px 0;
}
p {
font-size: 2rem;
font-weight: 500;
color: #777777;
}
a {
font-size: 1.9rem;
font-weight: 700;
color: #33333;
}
.wrapper {
max-width: 1140px;
margin: 0 auto;
position: relative;
}
/* HEADER */
.header-banner {
background: url(../images/image-main.jpeg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
min-height: 100vh;
}
.header-banner h1 {
position: absolute;
top: 350px;
}
.logo h2 {
color: #005769;
font-weight: 700;
float: left;
position: absolute;
top: 40px;
margin: 0;
padding: 0;
}
/* HEADER NAV MENU */
nav {
position: absolute;
top: 60px;
right: 0;
}
.header-nav li {
font-weight: 700;
list-style-type: none;
float: left;
}
.header-nav a {
font-size: 1.9rem;
color: #333333;
text-decoration: none;
text-transform: uppercase;
padding: 10px 20px;
}
.header-nav a:hover {
font-size: 1.9rem;
background-color: #16D6D1;
border-radius: 6px;
color: #333333;
text-decoration: none;
padding: 10px 20px;
}
/* MAIN SECTION */
.articles {
background: #fff;
padding: 100px 0;
text-align: center;
background-color: red;
}
.articles img {
width: 100%;
display: block;
}
.thin-article {
float: left;
width: calc(30% - 10px);
margin-right: 10px;
margin-bottom: 10px;
}
.wide-article {
float: left;
width: calc(70% - 10px);
margin-left: 10px;
margin-bottom: 10px;
}
.article-bottom {
background: #F6F8FA;
height: 250px;
}
.read-more-btn {
color: #333333;
}
a.read-more-btn {
text-decoration: none;
padding: 10px 20px;
border-radius: 6px;
background-color: #16D6D1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Project</title>
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,700" rel="stylesheet">
</head>
<body>
<!-- Allows users the ability to get to the main content for your site -->
<a href="#maincontent" class="skip-link">Skip to main content.</a>
<!-- HEADER SECTION -->
<header>
<div class="header-banner">
<div class="wrapper">
<div class="logo"><h2>travel</h2></div>
<nav>
<ul class="header-nav">
<li><a href="index.html">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
<h1>travel outdoor<br/> ipsum dolor sit.</h1>
</div>
</div>
</header>
<!-- MAIN SECTION -->
<!-- can have many setions now in the main e.g about us -->
<main id="maincontent">
<section class="articles">
<div class="wrapper clearix">
<!-- article 1 -->
<article>
<div class="thin-article">
<img src="images/image-1.jpeg" alt="back of a vw van driving along the road">
</div>
</article>
<!-- article 2 -->
<article>
<div class="wide-article">
<div class="article-top">
<img src="images/image-2.jpeg" alt="small catamaran surronded by a large ocean">
</div>
<div class="article-bottom">
<h3>Feature</h3>
<h2>Lorem ipsum dolor sit</br> amet, consectetur</h2>
<a class="read-more-btn" href="#">Read More</a>
</div>
</div>
</article>
</div>
</section>
</main>
</body>
</html>