Tell us what’s happening:
my code passes all the tests but I am trying to center the link at the bottom of the page. I have used padding right and left / auto. I have used margin right and left / auto. neither are working. I can enter a padding-left with a px value to get it to work but then is not responsive to resizing. what am I missing?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tribute Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">This is a trubute to some person</h1>
<figure id="img-div">
<div id="img-caption">This is a caption for the image</div>
<img id="image" src="https://jannellidesign.com/wp-content/uploads/2023/03/StrechIII1-scaled.jpg" >
</figure>
<p id="tribute-info">Stuff about the tribute.</p>
<h2>Important dates</h2>
<div class="container">
<ul>
<li>This date this happend</li>
<li>Another thing that hapenned</li>
<li>Other stuff happened</li>
<li>Even more things went down</li>
<li class="important">This thing was really important!!</li>
<li>This happened</li>
<li>This happened and made everyone sad</li>
</ul>
</div>
</div>
<a id="tribute-link" href="https://jannellidesign.com/wp-content/uploads/2023/03/StrechIII1-scaled.jpg" target="_blank">Link To Stuff</a>
</main>
</body>
</html>
/* file: styles.css */
main {
border: 2px solid black;
width: 60%;
padding: 0 0 20px 0;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
h1, p, h2, #img-caption {
text-align: center;
}
p, #img-caption {
font-size: 1.5em;
text-align: center;
}
#image {
display: block;
max-width: 100%;
}
figure {
text-align: center;
}
li {
line-height: 1.5em;
font-size: 1.25em;
}
.important {
font-weight: bold;
}
ul {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
#tribute-link {
display: inline-block;
font-size: 1.15em;
text-decoration: none;
padding-left: auto;
padding-right: auto;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.1 Safari/605.1.15
Challenge Information:
Build a Tribute Page - Build a Tribute Page
