1
我有一個設置爲顯示垂直堆疊內容塊的頁面。無法填充容器和溢出的內容
我已經得到它在768px下工作正常，但在這個尺寸，我已經增加了一些額外的線，這是所有溢價在divs。 注意：我現在只在768px處進行測試。
這裏的現場測試場地：http://s213258.gridserver.com/
任何幫助或想法將是真棒，謝謝！
HTML結構：
<section class="main-section" id="content">
<div class="container">
<div class="clearfix home-info-row">
<div class="md-col md-col-5">
<header class="section-heading">
<h2>Timeline</h2>
</header>
<p class="section-sub-heading">
The Big Moments in Les Anderson’s Life
</p>
</div>
<div class="md-col md-col-7 impact-button__box">
<a href="timeline.html" class="impact-button">
<div>
<span class="impact-button__title">See the life</span>
</div>
</a>
</div>
</div>
<div class="clearfix home-info-row">
<div class="md-col md-col-5 md-col-right">
<header class="section-heading">
<h2>Stories</h2>
</header>
<p class="section-sub-heading">
Fond Memories from loved ones of Les
</p>
</div>
<div class="md-col md-col-7 impact-button__box">
<a href="stories.html" class="impact-button">
<div>
<span class="impact-button__title">Read the Stories</span>
</div>
</a>
</div>
</div>
<div class="clearfix home-info-row">
<div class="md-col md-col-5">
<header class="section-heading">
<h2>Gallery</h2>
</header>
<p class="section-sub-heading">
Stunning photos from Les himself
</p>
</div>
<div class="md-col md-col-7 impact-button__box">
<a href="photos.html" class="impact-button">
<div>
<span class="impact-button__title">View the Photos</span>
</div>
</a>
</div>
</div>
</div>
</section>
相對CSS：
.section-heading {
position: relative; }
.section-heading h2 {
font-size: 65px;
letter-spacing: 2.5px;
margin-bottom: 1rem;
font-family: 'PontiacInlineRegular', serif;
}
@media (min-width: 30em) {
.section-heading h2 {
font-size: 115px;
margin-top: 1rem; } }
@media (min-width: 52em) {
.section-heading h2 {
font-size: 115px;
margin-top: 1rem; } }
.section-sub-heading {
font-size: 20px;
letter-spacing: 2px;
line-height: 30px;
width: 75%;
min-width: 280px;
margin: 0 auto 25px auto;
font-family: 'PontiacInlineShadow', serif;
}
@media (min-width: 30em) {
.section-sub-heading {
font-size: 30px;
width: 55%;
line-height: 1.25; } }
@media (min-width: 52em) {
.section-sub-heading {
font-size: 30px; } }
.impact-button {
-webkit-transition: color 0.25s;
transition: color 0.25s;
max-width: 498px;
width: 100%;
text-align: center;
display: block;
color: #DAC9A8;
padding: 25px 25px 30px;
position: relative;
box-sizing: border-box;
border-radius: 4px;
margin: 0;
padding: 15px 0;
text-decoration: none; }
.impact-button.full {
max-width: 100%; }
@media (min-width: 30em) {
.impact-button {
margin-left: 0;
margin-right: 0;
width: 100%;
max-width: none;
float: none; } }
@media (min-width: 52em) {
.impact-button {
margin-left: 0;
margin-right: 0; } }
.impact-button:hover {
color: #AC987F; }
.impact-button__box {
background-color: #963C34;
width: 100%;
}
.impact-button__title {
font-size: 30px;
font-weight: 300;
font-family: 'PontiacInlineShadow', serif;
line-height: 1.1;
margin: 0;
padding-bottom: 0;
padding-top: 5px;
display: block;
position: relative; }
@media (max-width: 52em) {
.impact-button__text {
font-size: 40px; } }
@media (min-width: 52em) {
.impact-button__title {
font-size: 48px; } }
.impact-button__text {
display: block;
font-size: 23px;
margin-top: 30px; }
@media (max-width: 52em) {
.impact-button__text {
font-size: 18px; }
}
.impact-button__text em, .impact-button__text a {
text-decoration: underline;
font-style: normal; }
.impact-button__text a {
display: inline-block;
position: relative;
z-index: 5; }
.impact-button--download {
box-shadow: inset 0 0 0 4px #575E70;
padding: 15px 10px;
text-decoration: none;
display: inline-block;
min-width: 300px; }
.impact-button--download:before, .impact-button--download:after {
border: 4px solid transparent; }
.impact-button--download .impact-button__title {
font-size: 25px;
margin: 0;
line-height: 1.1;
padding-bottom: 10px; }
.impact-button--download .impact-button__title em, .impact-button--download .impact-button__title a {
position: relative;
font-style: normal; }
.impact-button--download .impact-button__title em:after, .impact-button--download .impact-button__title a:after {
content: "";
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 2px;
background: #AC987F; }
.impact-button--download .impact-button__title:after {
display: none; }
.impact-button--download .impact-button__text {
font-size: 12px;
margin: 0; }