why my card is not getting aligned horizontally-CodePudding

here is the code for the card section. The cards get down added vertically when added i want them to be horizontally aligned , 3 cards in one row . please help. Thanks a lot

<div >
    <div >

      <div >
        <div  style="width: 18rem;">
          <img  src="..." alt="Card image cap">
          <div >
            <h5 >Card title</h5>
            <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
          <ul >
            <li >Cras justo odio</li>
            <li >Dapibus ac facilisis in</li>
            <li >Vestibulum at eros</li>
          </ul>
          <div >
            <a href="#" >Card link</a>
            <a href="#" >Another link</a>
           
            <div >
            <div  style="width: 18rem;">
              <img  src="..." alt="Card image cap">
              <div >
                <h5 >Card title</h5>
                <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
              <ul >
                <li >Cras justo odio</li>
                <li >Dapibus ac facilisis in</li>
                <li >Vestibulum at eros</li>
              </ul>
              <div >
                <a href="#" >Card link</a>
                <a href="#" >Another link</a>
              </div>
            </div>
             
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>

CodePudding user response：

<div >
<div >
<div >
        <div  style="width: 18rem;">
          <img  src="..." alt="Card image cap">
          <div >
            <h5 >Card title</h5>
            <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
          <ul >
            <li >Cras justo odio</li>
            <li >Dapibus ac facilisis in</li>
            <li >Vestibulum at eros</li>
          </ul>
          <div>
            <a href="#" >Card link</a>
            <a href="#" >Another link</a>
          </div>
    </div>
  </div>
  <div >
    <div  style="width: 18rem;">
      <img  src="..." alt="Card image cap">
      <div >
        <h5 >Card title</h5>
        <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
      <ul >
        <li >Cras justo odio</li>
        <li >Dapibus ac facilisis in</li>
        <li >Vestibulum at eros</li>
      </ul>
      <div>
        <a href="#" >Card link</a>
        <a href="#" >Another link</a>
      </div>                 
    </div>
  </div>
       
        <div >
        <div  style="width: 18rem;">
          <img  src="..." alt="Card image cap">
          <div >
            <h5 >Card title</h5>
            <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
          <ul >
            <li >Cras justo odio</li>
            <li >Dapibus ac facilisis in</li>
            <li >Vestibulum at eros</li>
          </ul>
          <div>
            <a href="#" >Card link</a>
            <a href="#" >Another link</a>
          </div>
    </div>
  </div>
</div>

Here is the structure for alignment.