I have highlighted in pink the part I’m trying to center and I want to make sure the li’s stay left aligned like they are when the ul is centered. Any help is appreciated!
Code pen: https://codepen.io/troy_b16/pen/RwjReLz
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ken Block Tribute Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<div id="title">
<h1>Ken Block</h1>
<p>
Co-Founder of DC Shoes, extreme sports athlete, rally driver and hoonigan.
</p>
</div>
<div id="img-div">
<img src="https://www.speednik.com/files/2016/01/2016-01-12_19-49-24.jpg" alt="Ken Block standing next to a Mustang" id="image">
<p id="img-caption">Ken Block stands next to the "Hoonicorn", a 1965 Ford Mustang with 1,400 horsepower and all wheel drive that will go 0-60 in 1.8 seconds!</p>
</div>
<div id="tribute-info">
<h2>Here's a list of Ken Block's achievements:</h2>
<ul>
<li>Co-Founded Droors Clothing (DC Shoes) in 1993</li>
<li>Participated in the Gumball 3000 Rally in 2005</li>
<li>Began his 1st year in Rally racing and won Rookie of the Year</li>
<li>Signed a sponsorship deal with Subaru in 2006</li>
<li>Took home bronze in the 1st ever X-Games rally event</li>
<li>Took home a silver medal in X-Games XIII rally event</li>
<li>Appeared in a segment of the car show "Top Gear"</li>
<li>Filmed the infamous "Gymkhana 2" infomercial with 52 million views</li>
<li>Co-founded Gymkhana Grid, a gymkhana race held annually around the world</li>
<li>Founded Hoonigan Racing Division in 2010</li>
<li>Signed a sponsorship deal with Ford in 2010</li>
<li>Won the Rally in the 100 Acre Wood for the 5th consecutive time</li>
<li>Holds the world record for the world's fastest snowcat</li>
<li>Founded the "Hoonigan" YouTube channel with 940 million views</li>
<li>Appeared in three installments of the "Dirt" racing video games</li>
<li>Appears in the 2015 "Need for Speed" video game</li>
<li>Signs a deal with Audi in 2021 to help develop electric cars</li>
</ul>
<q>In life—from the simplest thing to the biggest thing—I want to be proud of what it is and stake my claim: 'That's mine and that's how I do it.'
--Ken Block
</q>
</div>
<div>
<footer>
If you have time, you should read more about this absolute mad lad on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Ken_Block" target="_blank">Wikipedia entry.</a>
</footer>
</div>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
CSS:
#main {
background-color: #d3d3d3;
border-radius: 5px;
font-family: 'Tahoma', sans-serif;
margin-top: 1.7em;
margin-bottom: 1.7em;
}
#title {
text-align: center;
padding-top: 1.5em;
font-size: 1.2em;
}
#title p {
font-size: 0.8em;
color: rgb(53, 53, 53)
}
#img-div {
background-color: black;
margin: 1em;
}
#image {
height: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
padding-top: 1.1em;
}
#img-caption {
color: #95D600;
text-align: center;
padding-bottom: 1.1em;
}
#tribute-info {
text-align: center;
}
h2 {
padding-top: 1em;
padding-bottom: 1em;
}
ul {
display: inline-block;
background-color: pink;
}
li {
text-align: left;
}