Tell us what’s happening:
I have seemingly completed the project but it’s saying I have NOT made the #image element a max-width of 100% when I clearly have and I’m not sure what I’ve done wrong
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Tolkien Tribute Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<header><h1 id="title" class="bold">J.R.R. Tolkien</h1></header>
<div class="map-ring" id="img-div">
<img id="image" class="ring" src="https://static.wikia.nocookie.net/lotr/images/0/0d/The_One_Ring_on_a_map_of_Middle-earth.jpg">
<figcaption id="img-caption" class="ring-caption">“Three Rings for the Elven-kings under the sky,
Seven for the Dwarf-lords in their halls of stone,
Nine for Mortal Men, doomed to die,
One for the Dark Lord on his dark throne
In the Land of Mordor where the Shadows lie.
One Ring to rule them all, One Ring to find them,
One Ring to bring them all and in the darkness bind them.
In the Land of Mordor where the Shadows lie.”
― J.R.R. Tolkien</figcaption>
<img id="map"src="https://media.printables.com/media/prints/603163/images/4798616_e94fe5d2-0bf4-4e96-a983-9104f7bce2a4_4d2b7e4c-ee7c-4a70-b864-7c6f033f7197/thumbs/inside/1920x1440/png/middle-earth-screenshot.webp">
<figcaption id="img-caption" class="map-caption">Map of Middle Earth during the Third Age. </figcaption>
</div>
<section id="tribute-info">
<h2><u>John Ronald Reuel Tolkien</u> (Born 3 January 1892 – Died 2 September 1973) was an English writer and philologist. He was the author of the high fantasy works The Hobbit and The Lord of the Rings.
From 1925 to 1945, Tolkien was the Rawlinson and Bosworth Professor of Anglo-Saxon and a Fellow of Pembroke College, both at the University of Oxford. He then moved within the same university to become the Merton Professor of English Language and Literature and Fellow of Merton College, and held these positions from 1945 until his retirement in 1959. Tolkien was a close friend of C. S. Lewis, a co-member of the informal literary discussion group The Inklings. He was appointed a Commander of the Order of the British Empire by Queen Elizabeth II on 28 March 1972.
After Tolkien's death, his son Christopher published a series of works based on his father's extensive notes and unpublished manuscripts, including The Silmarillion. These, together with The Hobbit and The Lord of the Rings, form a connected body of tales, poems, fictional histories, invented languages, and literary essays about a fantasy world called Arda and, within it, Middle-earth. Between 1951 and 1955, Tolkien applied the term legendarium to the larger part of these writings.
While many other authors had published works of fantasy before Tolkien, the tremendous success of The Hobbit and The Lord of the Rings ignited a profound interest in the fantasy genre and ultimately precipitated an avalanche of new fantasy books and authors. As a result, he has been popularly identified as the "father" of modern fantasy literature and is widely regarded as one of the most influential authors of all time.</h2>
<h3>To read more about the incredible life of J.R.R. Tolkien head to his <a id="tribute-link" href="https://en.wikipedia.org/wiki/J._R._R._Tolkien" target="_blank"> Wikipedia Page</a></h3>
</section>
</main>
</body>
</html>
/* file: styles.css */
h1 {text-align: center; font-family: "Snell Roundhand", cursive; color: #cfb900; }
main{padding: 20px; margin:auto;}
body {background-color: #00210f;}
header{background-color: #001001;}
.map {margin: auto; display: block; max-width: 100%;}
.map-caption {color: #cfb900; background-color: #001001; font-style: italic; max-width:100%;}
.large {height: 25px;}
.image{margin: auto; display: block; max-width: 100%;}
.ring-caption{color: #cfb900; text-align: center; font-family: "Snell Roundhand", cursive; background-color: #001001; font-style: italic;}
.map-ring{display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
max-width: 1000px;
margin: 0 auto;
padding: 20px 10px;}
h2{color: #cfb900; text-align: left; font-family: "Snell Roundhand", cursive; background-color: #001001;}
h3{color: white;}
tribute-link{color: #cfb900}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
Challenge Information:
Tribute Page - Build a Tribute Page