Tell us what’s happening:
The image for my tribute site is larger than it’s figure parent, and extends past it to the right. I can’t figure out why it is not staying centered.
Your code so far
html {font-size: 100%;}
body {background-color: #ea2a43;
margin: 2% 1% 2% 1%;}
main {background: white;
padding: 2% 2% 2% 2%;}
h1 {font-family: WaltographRegular, Monospace;
font-size: 7rem;
text-shadow: 4px 4px 4px #aaa;
text-align: center;
margin-bottom: 0px;}
h5 {text-align: center;
font-size: 2rem;
font-family: Monospace;
font-style: normal;}
figure {
padding: 0px;
background: LightGrey;
margin: 0px;}
img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
background: blue;
border: 10px solid black;
border-radius: 20px;
margin: 0px;}
p1 {text-align: center;
margin: 0 0 30px 0;
}
ul {text-align: left;
margin: 0 auto 10% auto; }
li {margin: 16px 0;}
.center {display: block;
margin-left: auto;
margin-right: auto;
width: 80%;}
.flex-container {
display:flex;
flex-direction: column;
}
footer {background: PaleTurquoise;}
</style>
<div class="flex-container">
<main id="main">
<h1>Mickey Mouse</h1>
<h5>The World's Most Famous Cartoon</h5>
<figure id="img-div" class="center">
<img id="image" src="https://i.ytimg.com/vi/fplMqNWrjjY/maxresdefault.jpg" alt="Mickey Mouse"/>
<figcaption id="img-caption" align="middle">Mickey Mouse's 1928 screen Debut</figcaption>
</figure>
A Timeline of Mickey Mouse
- 1928 - Walt Disney has Ub Iwerks begins designing a new character to replace Oswald the Lucky Rabbit due to contract disputes with Universal.
- 1928 - Disney names character “Mortimer Mouse”, but later changes to “Mickey Mouse” on behest of his wife.
- 1928 -Mickey makes his first apperance in Steamboat Willie
- 1929 - In The Barn Dance Minnie Mouse turns down Micky Mouse for the first time.
- 1932 - Mickey Received his first Academy Award Nomination for Mickey’s Orphans
- 1935 - Appears in his first color film The Band Concert
- 1940 - Mickey debuts in his first feature-length film, Fantasia as The Sorcerer’s Apprentice
- 1942 - Alongside Pluto, he won his first and only Academy Award
- 1950's - Gains fame for appearances in The Mickey Mouse Club
<p1>Tribute Info Here
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Mickey_Mouse" target="_blank">More Information</a> </p1>
</main>
</div>
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36
.
Challenge: Build a Tribute Page
Link to the challenge: