display Flex.. Mystery of the universe. | Scrimba | Page 1

Hey guys.. Im really struggling to wrap my head around how to make this work like I want to. In the previous courses I feel like I almost lucked out when it worked..

Can one of you please try to explain to me why this is all in one column, and what I can do to make it continue in the next row? (This dont have to look pretty, just want the layout to work)

I want the scoreboard class in one row, then buttons in next and finally winner in last.

HTML:

    <head>
        <link rel="StyleSheet" href="index.css">
    </head>

    <body>
      
        <div class="scoreBoard">
                <h1 id="playerHand"></h1>    
                
                <h2 id="comment"></h2>
        </div>
            
        <div class="scoreBoard">
                <h1 id="dealerHand"></h1>

                <h2 id="dealerComment"></h2>
            
        </div>
            
            <div class="buttons">
                <button id="start-btn" onclick="reset()">START/RESET</button>
                <div></div>
                <button id="hit-btn" onclick="hit()">HIT</button>
                <div></div>
                <button id="stop-btn" onclick="stop()" >STOP</button>
            </div> 
                
        <h1 id="winner"></h1>
    
    <script src="index.js"></script>
    </body>

</html>```

CSS:
```body {
    text-align: center;
    display: flex ;
    background-color: green;    
}

.scoreBoard {
    margin-left: 50px;
    margin-right: 50px;
    text-align: center;
    border: 6px dotted red;
    background-color: green;
    color: white;
    height: 200px;
    width: 200px;
}

button {
    margin-top: 10px;
    margin-left: auto;    
    margin-right: auto;
    color: white;
    border:1px solid black;
    background-color: rgba(32, 32, 153, 0.692);
    padding-left: 6px;
    padding-right: 6px;
    padding-top:3px;
    padding-bottom: 3px;
    border-radius: 10px;
}

#winner {
    height: 50px;
    font-size: 50px;
    color:red;
}```


Thank you so much for helping a poor noob out.
-Trond

#display Flex.. Mystery of the universe.