Image larger than figure parent

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

Tribute Page
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:

I am pretty sure this is what you’re trying to do, but let me know if I misunderstood you.

The reason the image is overflowing the parent “figure” element is because of the border around the image. The way I get around it is to add some padding and relative positioning.

Change the padding for figure element:
Was - padding: 0px;
Should be - padding: 0px 10px;

Add to the img element:
position: relative;
right: 10px;

It also might be a good idea to add these changes to the id’s rather than to the elements themselves because if you reuse the elements you might not want the same styling again.

Thanks so much for all your help! That fixed my problem!