Why is span still autoline indenting

[codethematrix1]

I have two spans wrapped in a span and they both have tags within them. I tried the usual display: inline; and other but they do not work.

<span id="items">
      <span id="item"><figure><img src="assets/img/Pickaxe.png" alt="Pickaxe image" style="transform: rotate(50deg);"><figcaption>Mining</figcaption></figure></span>
      <span id="item"><figure><img src="assets/img/hammer_anvil.png" alt="Anvil image"><figcaption>Crafting</figcaption></figure></span>
</span>

#item figure {
    border: solid white;
    width: 7%;
    background-color: rgba(128, 128, 128, 0.932);
    text-align: center;
    margin-left: 10px;
}

#item figure:hover {
    background-color: rgba(128, 128, 128, 0.466);
    cursor: pointer;
}

#item figure img {
    width: auto;
    max-width: 100%;
}

[carlosvisator]

Hi @codethematrix1

I don’t know what are you trying to achieve here, it would be great if you extend your question a bit.

One thing I noticed is you are wrapping block-elements (figure and figcaption) within an inline element <span>, and this is not allowed. And be aware too that inline elements take only the space they need (width or content) and block elements as much as they can (100% of their parent by default).

Happy coding and let us know what are you building here!