Ok cool.
The first thing you want to do is get rid of these style tags in the html.
<style>
body {
text-align: center;
background-color: gray;
}
li {
text-align: justify;
font-size: 100%;
}
a {
font-family: arial;
font-color: orange;
}
</style>
Delete the style tags and move all of that css into the css section.
Your css should now look like this
img
max-width: 400px;
text-align: center;
}
p {
text-align: center;
font-family: arial black;
font-size: 50px;
}
a {
font-family: arial;
font-color: orange;
}
body {
text-align: center;
background-color: gray;
}
li {
text-align: justify;
font-size: 100%;
}
Now that you are building projects, you want to keep your css and html seperate.
Once you fix that, then you should draw your attention to this error here
img
max-width: 400px;
text-align: center;
}
You are missing something important there.
Once you fix that then you will need to clean some of the html because there are a few errors.
The first thing I would do is fix the img div to only include the image, and figcaption.
<div id="img-div">
<img id="image" src="https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2F7c8f440a-0e41-11eb-ac14-2688f9fd3309.jpg?crop=1147%2C765%2C0%2C0" alt="picture of Malcolm X smiling">
<figcaption id="img-caption">Malcolm X was a civil rights advocate and one of the most influential, honest and inspiring persons of the civil rights era. 55 years after his assassination, movies and books are still be introduced to generations of people who are fascinated and intrigued by his life and untimely, violent and suspicious death.</figcaption>
</div>
Then you will be able to pass the max-width test but continue to read the error messages for the missing margin and display properties.
Once you pass that test, then you will need to clean up the rest of the html.
Codepen has an analyzer you can use to fix the errors.
Then you should be able to pass all of the tests.
Hope that helps!