JSFiddle - React, Tailwind, and code Playground
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
*/