lolcode (1) [Avatar] Offline
#1
Unless I missed something listing 4.9 leaves a wider margin on the right side of the page because the right margin on the media elements adds to the padding.

I came up with a solution that moves the right margin into the nth-child selector. Also since we subtract 1.5em from the width of all media elements we are subtracting it twice. I changed this to 0.75em.

.media {
  float: left;
  width: calc(50% - 0.75em - 1px); /* 0.75 = 1.5em /2 */
  margin: 0 0 1.5em 0;  /* No right margin */
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
}

.media:nth-child(odd) {
  clear: left;
  margin-right: 1.5em;  /* Right margin here only */
}