@wendyhamel
Posted
Hi,
You can change the color of the bullets with li::marker { color: #7B284F } if you use the original list style items. They will be centered automatically too, so that solves two problems at once.
Another solution is to set your list items as display: flex with align-items: center. This will set your custom ::before bullets to center horizontally.
Apart from your question, I noticed a few other thing you may want to consider to improve your solution to this challenge.
The image of the recipe stretches horizontally on screens between mobile and desktop. As this image is not a background, background-size: cover has no effect. On an image you can use object-fit: cover and you may want to remove the set height restriction of 150px to prevent the image from being cut off top and bottom. But only if you don't like it to stay a set height.
Happy coding!
Marked as helpful
