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 ...

Get Front-End Web Development: The Big Nerd Ranch Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.