Front-End Web Development: The Big Nerd Ranch Guide

Adjusting the Space Between Items

Ottergram now has some nice colors reminiscent of otters’ ocean home. But adding the colors has revealed some unwanted whitespace inside the border of the .thumbnail-item elements. Also, those pesky bullets are drawing attention away from the glory of the otters.

To get rid of the bullets, set the .thumbnail-list’s list-style property to none in styles.css:

...
.thumbnail-item {
  border: 1px solid rgb(100%, 100%, 100%);
  border: 1px solid rgba(100%, 100%, 100%, 0.8);
}

.thumbnail-list {
  list-style: none;
}

.thumbnail-image {
  ...

To get rid of the whitespace, you will use the same technique you used with the .thumbnail-image. Each .thumbnail-item has that whitespace by default to accommodate items ...