If you inspect your #item figure in the devoper console, you will notice that it has a right margin of 40px.
This appears to be a default setting for figure elements.
Remove or reduce this margin by specifically setting margin-right to the value you want.
In addition to that, consider removing the role for width: 20% to allow the figure elements expand.
Ill give you some general direcitons based on the way you wrote your code so far, hopefully they can prove useful to you.
Why do you use <span> so much? Nowadays its fine to use div even for some inline elements and usually modern display layouts like flex and grid can handle the positioning. Id use span and other native inline elements only when i want to style a part of paragraph(text), a word etc.
Horizontal line <hr> is also not something modern sites would utilize. We want to keep the styling and visial content as much as possible inside the css, so using a border(e.g. border bottom) is more appropriate.
You utilize the id attribute wrong. Its purpose is to give a unique name to a single element. To apply a set of styles to multiple elements, you should use class. Use id to style particular element.
You also have a lot of inline styles(declared directly in the html). This is bad practice. Much better, like i said, to keep the styles in the css section. Simply utilize the id/class selectors and apply those styles like so.
Like other contributors mentioned above, many html elements have their default styling(browser specific). Some come with lot of styles. <figure> and <figcaption> do come with such predefined styles, as have particular purpose. Make sure you utilize those elements with their right purpose and take in mind their default styles(occasionalyl you want to override them). Other elements you often will find come along with additional styling are <ul>, <li>, form elements(inputs). Even the different heading tags(h1, h2, h3) have such.