 <p>There are two steps to accomplish this: 1. Change your parent div style to this:</p> <pre><code>#my-projects-section { background-color: black; height: 500px; width:100%; } </code></pre> <p>2. Add this to your child styles:</p> <pre><code>#image-one, #image-two, #image-three { width: 30%; margin: 1.66%; height: 200px; background-size: cover; background-repeat: no-repeat; transition: .2s ease-out, .2s ease-in; } </code></pre> <p><a href="http://codepen.io/westefan/pen/Lkoooq" rel="nofollow">http://codepen.io/westefan/pen/Lkoooq</a></p> <p>Currently this is statically defined, if you would like to add a new project into the section, you have to modify the CSS. There are also options to calculate margins, but it is not yet supported: <a href="https://developer.mozilla.org/en/docs/Web/CSS/calc" rel="nofollow">https://developer.mozilla.org/en/docs/Web/CSS/calc</a> Another option would be to use Javascript to count childelements and create style completely dynamical based on the amount of children.</p>