There are always many different ways to get something done in CSS. I used class selectors, element selectors, and I combined them with descendant selectors. My solution has 8 total selectors.

Use a descendant selector! If I wanted to style the Buy buttons, I could use this selector:

.question-options-container button {
    /* properties go here */
}

Here are some I bet you’ll need:

• background-color. There are multiple ways to set color in CSS. Hex codes (like #ffffff) are a common way.
• margin. Puts space between the edge of an element and the elements around it. This is a shorthand property for margin-top, margin-right, margin-bottom and margin-left.
• padding. Puts space between the edge of an element and the contents inside the element. This is a shorthand property for padding-top, padding-right, padding-bottom and padding-left.
• width. Don’t be too eager to use this property. Let some elements auto calculate their width based on their contents.
• border. A shorthand property for setting the border-color, border-style, and border-width
• color. This sets the color of the text, not the background color.
• font-family. You can set one font, or a font stack with plan A, plan B, etc.
• font-size. I used rem units to change font size.

Here’s an example of what those properties could look like in action:

.my-class {
    background-color: #ff0000;
    margin: 0 5px 10px 0;
    padding-top: 10px;
    width: 500px;
    border: 1px solid #303030;
    color: #ffffff;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.4rem;
}

You probably wouldn’t use all those properties with one selector, that’s just an example.

Yep. Here it is with pesticide.css outlining each element:

Set it on the body. Something like this:

body {
    background-color: #ffffff;
}

The body is also a great place to set the text color and font.

Here are some resources to learn flexbox:

W3Schools Flexbox

Flexbox Froggy

CSS Tricks: A Complete Guide to Flexbox

Try putting this property on the parent of the elements you want next to each other:

display: flex;

Centering can be tricky in CSS!

If you want to center an entire block-level element (like a <div> or a <p>) first make sure it has a width set on it. If you don’t set a width, it will take up the entire width by default and you won’t see a difference when you center it.

Then set the left and right margins to auto on the block-level element. One common way to do that is like this:

margin: 0 auto;

That sets the top and bottom margins to 0, and the left and right margins to auto.

If you want to center an inline element (like an <img> or a <span> or just some text), set the text align to center on the parent of the inline element. Like this:

text-align: center;

Rather than setting the width, set the max width. Like this:

max-width: 700px;

Look into the properties you can use with flexbox. CSS Tricks has a great guide on this.

You can set the justify-content property on the parent. I won’t tell you what to set it to, try looking through the options in CSS Tricks’ Guide

I think you already know what I’m going to say. Look into the properties you use with flexbox. CSS Tricks has a great guide on this.

You can set the flex-wrap property on the parent. I won’t tell you what to set it to, try looking through the options in CSS Tricks’ Guide

There’s a border-radius property that sets how round the corners are. It works even if there is no border set. Google it to learn more about how to use it.

There are many ways to tweak shadows in CSS. MDN Web Docs has some examples. You’ll want to do some trial and error until you get a look you like.

CSS has a type of selector called a pseudo class selector. One of them might be helpful! (Spoiler: It will be)

Here’s a good place to start.

Yep. Here it is with pesticide.css outlining each element: