A Pen by Andrew Kirchmyer.

cool-colored-backgrounds-and-centering-content-with-padding.markdown

cool colored backgrounds and centering content with padding

A Pen by Andrew Kirchmyer on CodePen.

License.

index.html

<section><h1>Another heading</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ita est, vide ne facinus facias, cum mori suadeas. Nullus est igitur cuiusquam dies natalis. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Habent enim et bene longam et satis litigiosam disputationem. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Praeteritis, inquit, gaudeo. Duo Reges: constructio interrete. Respondent extrema primis, media utrisque, omnia omnibus. Quid enim possumus hoc agere divinius?

Quasi ego id curem, quid ille aiat aut neget. Quo modo autem philosophus loquitur? Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. Hic nihil fuit, quod quaereremus. Nulla profecto est, quin suam vim retineat a primo ad extremum. Bonum negas esse divitias, praeposìtum esse dicis? An vero, inquit, quisquam potest probare, quod perceptfum, quod. 
</section><section>  <h1>Another heading</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ita est, vide ne facinus facias, cum mori suadeas. Nullus est igitur cuiusquam dies natalis. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Habent enim et bene longam et satis litigiosam disputationem. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Praeteritis, inquit, gaudeo. Duo Reges: constructio interrete. Respondent extrema primis, media utrisque, omnia omnibus. Quid enim possumus hoc agere divinius?

Quasi ego id curem, quid ille aiat aut neget. Quo modo autem philosophus loquitur? Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. Hic nihil fuit, quod quaereremus. Nulla profecto est, quin suam vim retineat a primo ad extremum. Bonum negas esse divitias, praeposìtum esse dicis? An vero, inquit, quisquam potest probare, quod perceptfum, quod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ita est, vide ne facinus facias, cum mori suadeas. Nullus est igitur cuiusquam dies natalis. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Habent enim et bene longam et satis litigiosam disputationem. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Praeteritis, inquit, gaudeo. Duo Reges: constructio interrete. Respondent extrema primis, media utrisque, omnia omnibus. Quid enim possumus hoc agere divinius?

Quasi ego id curem, quid ille aiat aut neget. Quo modo autem philosophus loquitur? Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. Hic nihil fuit, quod quaereremus. Nulla profecto est, quin suam vim retineat a primo ad extremum. Bonum negas esse divitias, praeposìtum esse dicis? An vero, inquit, quisquam potest probare, quod perceptfum, quod. 
</section><section><h1>Another heading</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ita est, vide ne facinus facias, cum mori suadeas. Nullus est igitur cuiusquam dies natalis. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Habent enim et bene longam et satis litigiosam disputationem. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Praeteritis, inquit, gaudeo. Duo Reges: constructio interrete. Respondent extrema primis, media utrisque, omnia omnibus. Quid enim possumus hoc agere divinius?
</section>

style.css

body{
    background: #333;
}
section {
    margin: -20px -8px -8px 30%;
    /* padding on the section lets us avoid using a wrapper on the content */
    padding: 1em 10% 3em;
    font-family: "Proxima Nova Regular","Helvetica Neue","Calibri","Droid Sans","Helvetica","Arial",sans-serif;
    color: #333;
    line-height: 1.5em;
}
section:nth-child(1) {
    background: #31ADED;
}
section:nth-child(2) {
    background: #ED4035;
    color: #d3d3d3;
}
section:nth-child(3) {
    background: #ED9743;
}