JSFiddle - React, Tailwind, and code Playground

HTML

<h1>History</h1>

CSS

body {
    width: 960px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
h1 {
    position: relative;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 4px 0;
    text-align: center;
}
h1:before,
h1:after {
    content: '';
    position: absolute;
    top: -1px; bottom: -1px;
    background-color: yellow;
    width: 16px;
}
h1:before {
    left: -10px;
}
h1:after {
    right: -10px;
}

JavaScript

/* SO
http://stackoverflow.com/questions/15604429/add-extra-margin-to-the-960-gs-framework-without-breaking-its-purpose
*/