Making spans inside of figures displayed in one line

Question

I want the following 3 figures to get displayed all in one line:

.hero.sec{
  display: inline;
}

<center>
   <div class="about" id="abt">
  <div class="abtcontent">
     <be>
     <h1 style="color: black; margin-bottom: 0; border-bottom: 5px solid black; border-radius: 5px; width: 7%; margin-left: 0;"><b>About</b></h1>
     <p style="color:black">Lorem Ipasum</p>
     <center>
        <div class="hero.sec">
           <h2>
              <figure>
                 <span class="num" data-val="650">000</span>
           </h2>
           <figcaption>Lines of Code</figcaption></figure>
           <h2>
              <figure>
                 <span class="num" data-val="50">000</span>
           </h2>
           <figcaption>Scam Servers detected</figcaption></figure>
           <figure>
              <h2><span class="num" data-val="10"></span></h2>
              <figcaption>Legit Servers listed</figcaption>
           </figure>
        </div>
     </center>
  </div>
   </div>
</center>

However, I still get a new line for every single figure. Can someone help me?

Answer 1

You should organize your tags first, Also Multi classes in HTML must be separated by space not '.', The following code will display figures in the same line as you requested:

<center>
   <div class="about" id="abt">
      <div class="abtcontent">
         <br>
         <h1 style="color: black; margin-bottom: 0; border-bottom: 5px solid black; border-radius: 5px; width: 7%; margin-left: 0;"><b>About</b></h1>
         <p style="color:black">Lorem Ipasum</p>
         <div class="hero sec">
            <figure>
               <h2>
                  <span class="num" data-val="650">000</span>
               </h2>
               <figcaption>Lines of Code</figcaption>
            </figure>
            <figure>
               <h2>
                  <span class="num" data-val="50">000</span>
               </h2>
               <figcaption>Scam Servers detected</figcaption>
            </figure>
            <figure>
               <h2><span class="num" data-val="10"></span></h2>
               <figcaption>Legit Servers listed</figcaption>
            </figure>
         </div>
      </div>
   </div>
</center>

Css :

figure {
             display: inline-block;
        }