Why is there soo much space between these spans?

HTML-CSS
1

I am creating the top navigation menu for my game and there are tiles you click on like so

Problem is circled in red
Problem is circled in red1726×372 25.2 KB

But as you can see there is too much space between the tiles. How do I remove it?

 <div id="main-nav">
    <span style="display: inline-block; margin-left: 10px; font-size: x-large;">
      <p>
        Logged in as <?php echo $_SESSION['username']; ?>&nbsp;&nbsp;
        <a href="ls/logout.php">Logout</a>&nbsp;&nbsp;
        Online time <span id="timer"></span> &nbsp;&nbsp;
        <a href="pages/updates.html" target="_blank">Update Log</a>&nbsp;&nbsp;
      </p> 
    </span>
    <hr>
    <span id="stats">
      <span style="background-color: rgb(168, 165, 165,0.2);"><img src="assets/img/coin.png"> <span id="coin-count" style="font-size: 35px;">0</span></span>
      <span style="background-color: rgb(168, 165, 165,0.2);"><img src="assets/img/Flap_coin.png"> <span id="flap-coin-count" style="font-size: 35px;">0</span></span>
      <span style="background-color: rgb(168, 165, 165,0.2);"><img src="assets/img/Level.png"> <span id="level-count" style="font-size: 35px;">0</span></span>
    </span>
    <hr>

<!--Part that is spacing too much-->
    <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 id="item"><figure><img src="assets/img/quest_bi.png" alt="Quests image"><figcaption>Quests</figcaption></figure></span>
    </span>
<!--End part that is spacing too much-->


  </div>


#main-nav {
    background-color: black;
    color: white;
    padding: 50px;
    padding-top: 25px;
    padding-bottom: 2px;
}


#stats span {
    margin: 10px;
}

#main-nav a {
    color: white;
}

/*CSS Code For Main Problem*/
#items {
  display: flex;
  flex-direction: row;
}


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

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

#item figure img {
    width: auto;
    max-width: 100%;
}
/*CSS Code For Main Problem*/
2

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.

3

then the width is too big and also it did not work the meargin thing in fact in inspect there is 0px of margin

4

i always advise that when asking a layout question to put your code inside a codepen so that people can play with it and test it and give you help that way…

5

Before:
image

6

My changes:
image

7

After:
image

8

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.

9

I solved it myself but I gave echyth’s solution a try and it worked thanksevreyone!