body {
width: 100%;
background-image: url("../img/pexels-photo-207301.jpeg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: cover;
background-attachment: fixed;
font-family: "Abel", sans-serif;
font-size: 20px;
color: #3b3b3b;
}
h1,
h2 {
font-family: "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif";
font-weight: bold;
text-transform: uppercase;
margin: 0px;
padding: 0px;
color: #111111;
text-align: center;
}
#mainpage {
max-width: 960px;
padding: 20px;
margin: 0 auto;
}
#header {
width: 100%;
margin: 15px auto;
}
#logo h1 {
line-height: 150px;
letter-spacing: -1px;
font-size: 4.5em;
}
#six-columns {
width: 100%;
background-color: rgba(250, 250, 250, 0.6);
}
#six-columns .column {
float: left;
width: 29.333%;
margin: 1%;
padding: 1%;
}
#six-columns::after {
content: "";
display: block;
clear: both;
}
#six-columns .column:nth-child(4) {
clear: left;
}
<div id="mainpage">
<div id="header-container">
<div id="header">
<div id="logo">
<h1> My Third Site</h1>
</div>
</div>
</div>
<div id="six-columns">
<div class="column">
<h2> Dignissim augue Dignissim augue</h2>
<p>Dignissim augue aenean, fringilla maecenas. Consectetuer condimentum. Dis libero neque accumsan ipsum facilisi, neque ornare rem in ligula luctus. Elit quam tincidunt porta veniam lorem. Lobortis tempor vitae justo. Taciti suspendisse mauris, mattis
a ligula velit semper pede euismod, tortor amet. Aliquam id, ut adipiscing. Morbi diam in neque, congue arcu elit maecenas, in sapien ullamcorper neque vestibulum. Leo nisl cursus turpis sit, vestibulum est ut tortor, massa hendrerit mauris orci,
vestibulum in dolor eu penatibus</p>
</div>
<div class="column">
<h2> cras tellus</h2>
<p>Praesent nam tempus luctus vestibulum, vivamus wisi. Mauris vitae justo metus, pretium nulla eu proident morbi. Auctor vitae, felis dolor vel turpis diam. Cras morbi, duis a duis feugiat sodales ut cras, et sociis nibh tincidunt. Consequat nam nulla,
interdum lectus rutrum ac penatibus mauris. Magna nisl arcu et platea a sed, cras tellus, sit nam turpis mi sodales pede nunc. Sapien donec facilisi cupiditate, suspendisse vel</p>
</div>
<div class="column">
<h2> posuere erat</h2>
<p>Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu
in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed
sit, dignissim sem sodales.</p>
</div>
<div class="column">
<h2> nostra purus</h2>
<p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet
sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula
nullam, est posuere.</p>
</div>
<div class="column">
<h2> suscipit nostra</h2>
<p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet
sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula
nullam, est posuere.</p>
</div>
<div class="column">
<h2> Rhoncus ornare</h2>
<p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet
sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula
nullam, est posuere.</p>
</div>
</div>
<div id="test-floats">
<h2> Testing Floats </h2>
</div>
</div>