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