<header>
<figure class = "portrait">
<img class = "image" src="Cat.JPG" alt = "Black cat with white spots smugly stairs at viewer from coach">
<figcaption>This text is a placeholder</figcaption>
</figure>
</header>
I am new to CSS and HTML, and I have been playing around with trying to center a figure in the header with a yellowish box around it. What I have found (in the image) is that the figure container background is colored, but the container itself extends the full width of the page.
Ideally, I would like the figure container to be centered within the header, creating a double border effect where the caption and image are contained within one color. The image has a border itself. I feel like there is something straightforward I am missing, any help would be appreciated.
This is because the <Figure> tag is a block level element. This means that it expands the width of its parent element (in this case the page).
Check out the pen below for changes I made to your code to show you how to do this. In short we can center items in the header, tell the figure that it is an inline-block element (so it will wrap around its contents) and then we give that figure some padding to produce the border look.
This is only one way to do it, but I think achieves what you are looking to do.
I did not realize that certain elements had default behavior (although it makes perfect sense). Is there any way to further adjust the width of the box to remove the space on the left and right (although this seems to be an inherent problem if the element always fills the box)?
