Changing the width of the buttons

First, let's address the width issue by creating a new class called button-narrow. So in our CSS, where our button section is, below the .button rule set we created in the last section, create a new class called .button-narrow. Very simply, the width is going to be 25%:

/****************Buttons****************/.button {  border: 2px solid #333;  color: #333;  padding: 10px 0;  display: block;  font-family: Arial, Helvetica, sans-serif;  text-align: center;  font-weight: bold;  letter-spacing: 1.5px;}.button-narrow {  width: 25%;}

Save this. Next, go to the shark-movies.html file. Go to each of the three anchor tags with a class of button. I'll just show the Learn More button here, but the code changes are the same ...

Get Mastering CSS 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.