Image larger than figure parent

HTML-CSS
1

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:

2

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.

3

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