Tribute Page - Build a Tribute Page

I finished the project, however, I want to improve my skills and make my project look cleaner. I would like to know how to put my image in a big white box with the text describing the image. I tried using sections and divs but couldn’t get the desired result. Does anyone know how ??

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <h1 id="title"><bold>Chainsaw Man</bold></h1>
      <p>Neighbourhood friendly Chainsaw Man</p>
      <div id="img-div" class="block">  
        <img id="image" src="https://www.anime-internet.com/content/images/2022/05/chainsaw-man-81-1024x576-2.jpg" > 
        <div id="img-caption">Chainsaw Man beating the villainous Katana Man</div>
        <p id="tribute-info"><a id="tribute-link" href="https://chainsaw-man.fandom.com/wiki/Chainsaw_Man_Wiki" target="_blank">Chainsaw Man's History</a></p>
        
        
      </div>


    </main>

  </body>


</html>
/* file: styles.css */
body {
 background-color:rgb(255,255,0);
 color: rgb(0,0,0);
 text-align:center;
 width:100%;
 height:10%;
 display:block;
}

.block{
  background-color:rbg(255,255,255);
  margin-left:auto;
  margin-right:auto;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

I did this /* file: styles.css */

body {
 background-color:rgb(255,255,0);
  box-sizing:border-box;
  margin:0;
  padding:0;
  text-align:center;
}
#img-div {
  
  width:100vw;
  display:grid;
  place-items:center;

}

#image{
  max-width:100%;
  height:auto;
  border:5px solid white;
  margin:0;
  padding:0;
  width:70vw;
}

#img-caption { 
display:inline-block;
background:white;
margin:0;
padding:0;
border:5px solid white;
width:70vw;
}

not sure if that’s something similar to what you had in mind.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

But, more precisely, for you to get a box surrounding something etc, it has to do with styling, and therefore, CSS. You can for example have an element inside of another element.
(an image inside of a div)
and you can set the background color for the div to be white, and position it / size it how you want, and then position the image inside of it, and the div will be your white box, it doesn’t have to be a div, you can / should choose whatever makes the most sense semantically, but this is just an example.