I am trying to display information from the database using PHP and CSS. However when I style the information it is displayed vertically, one after another. I wish to display the information in containers, side by side each other.

When i add the code `<div class="w3-row-padding w3-third"` to my first div, it displays the containers really small and all over my web page. I have removed the `w3-third` and it goes back to displaying vertically. I have created `design` and called the ID to make the alteration to the div, although nothing has changed still.

Any help would be greatly appreciated!

CSS

```
                    <style>

        design {
display:flex;
flex-wrap:wrap;

```

}

```
    </style>

          $con=new mysqli("localhost:3308","root","","fypdatabase");
        $st=$con->prepare("select * from personal_trainer where specialty=?");
        $st->bind_param("s", $cat);
        $st->execute();
        $rs=$st->get_result();
        while($row=$rs->fetch_assoc())
        {
            echo '<div id="design" class="w3-row-padding" style="margin-top:64px">
<div id="design" class="w3-col l3 m6 w3-margin-bottom">
  <div id="design" class="w3-card">
        <img src="images/'.$row["image"].'" style="width:100%"/>
        <div class="w3-container">
        <p><h3>'.$row["name"].'</h3></p>
        <p>'.$row["location"].'</p>
        <p>'.$row["fee"].' EUR</p>
        <p>'.$row["numberTWeeks"].' Weeks</p> 
        <p>'.$row["email"].'</p>
        <button class="w3-button w3-light-grey w3-block"><i class="fa fa-paypal"></i><a href="addItem.php?personalTrainerID='.$row["personalTrainerID"].'"> Purchase</a></button>
    </div></div></div>
    </div>';
        }
        ?>

```