How do I change the size of the <figure> area? - css

Question

I have a figure tag for my shopping cart icon, which sits beside the header navigation. The png img inside is the perfect size, and fills the height of the figure tag. But for some reason, the figure tag is too long. I've tried resizing the figure tag width and the image width, but nothing will make it smaller or erase that empty space which is covering my final menu option. I didn't have or notice this problem earlier, but I made some necessary changes to the CSS and since then, I've noticed this issue. No matter what I change, nothing seems to alter the figure size. [It spans across so I cannot hover over the 'help' option].
<div class="header-wrapper">
<div class="header-split">
<a class="home" href="#">Lu Steven</a>
<div class="menu-cart">
<nav>
<ul class="overall-nav">
<li>gallery</li>
<li><span>|</span></li>
<li>about</li>
<li><span>|</span></li>
<li>shop</li>
<li><span>|</span></li>
<li>exhibitions</li>
<li><span>|</span></li>
<li>contact</li>
<li><span>|</span></li>
<li>help</li>
</ul>
</nav>
<figure>
<img src="/images/cart.png"></img>
</figure>
</div>
</div>
</div>
CSS:
/* Header */
header ul{
display: flex;
flex-direction: row;
list-style: none;
justify-content: space-between;
width: 150%;
letter-spacing: 3px;
margin-left: -35%;
}
header a{
text-decoration: none;
color: aliceblue;
}
header a:hover{
color: #9ec8f0;
}
.header-wrapper{
position: absolute;
height: 7vh;
width: 100vw;
background-color: rgb(43, 43, 43);
color: aliceblue;
display: flex;
flex-direction: row;
}
.header-split{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 80%;
margin: auto;
}
.home{
display: flex;
align-items: center;
}
.menu-cart{
display: flex;
flex-direction: row;
align-items: center;
}
/* Cart */
figure{
display: flex;
flex-direction: row;
justify-content: right;
}
header img{
height: auto;
width: 35%;
}
header img:hover{
cursor: pointer;
opacity: 50%;
}

Answer 1

Hi there there is a small error in your code the img is a self closing tag you don't need to close it like this </img> it should be something like this
<img src="" alt=""/>
correct this error and your problem might get solved