Need help getting a button on the right place - scoreboard project

[jaunty imp]

https://github.com/MarijkeR90/score-app.git
I almost finished this scoreboard. I added a 'new game' button which works (Yay to me! ) but I would like to have the button under the +1, +2, +3 buttons, in the middle. And I really have no idea how to get it in that direction. I copy pasted the div into several places in the HTML but I don't get it near the right spot...

Unfortunately I don't understand Figma very well yet so I made a beautiful (😬 ) thing in Paint to show you what I would like to see.

[granite skiff]

The reason why the "new game" button is off to the right is because it is inside the flex container. Put it outside the container div and it will drop down to the bottom of the screen. @jaunty imp

[solar vine]

You can add one more div tag for home and guest after the container class

[solar vine]

Or this too

[jaunty imp]

But then it's outside the blue section

[jaunty imp]

This resulted in Home and Guest above each other and the button on the same place 😅

[granite skiff]

You can give the body tag the same background color as the container div:

body {
  background-color: #1B244A;
}

[jaunty imp]

But then the complete screen is blue 😅 I wanted to have the same set width and height

Could it be that I want something I can't code at the moment? That's fine too

[solar vine]

Wrap it around a div tag

<div class="container">

    <div class=“board”>
            <div>
                <h3>HOME</h3>
                <div id="home-score">
                    <p id="home-count">0</p>
                </div>
                <div class="count-btns">
                    <button id="one-btn" onclick="plusOneHome()">+1</button>
                    <button id="two-btn" onclick="plusTwoHome()">+2</button>
                    <button id="three-btn" onclick="plusThreeHome()">+3</button>
                </div>
            </div>
            <div>
                <h3>GUEST</h3>
                <div id="guest-score">
                    <p id="guest-count">0</p>
                </div>
                <div class="count-btns">
                    <button id="one-btn" onclick="plusOneGuest()">+1</button>
                    <button id="two-btn" onclick="plusTwoGuest()">+2</button>
                    <button id="three-btn" onclick="plusThreeGuest()">+3</button>
                </div>
            </div>

       </div>

            <div id="new-game">
                <button id="new-btn" onclick="newGame()">New Game</button>
            </div>
        </div>

And for board class add flex and direction as column

[jaunty imp]

I get this:

[solar vine]

My bad, add that on container class since you need the board and button in a column format

And not the home and guest in that format

[jaunty imp]

Then it turns into:

[solar vine]

html changes

<div class="container">
            <div class="board">
                <div>
                    <h3>HOME</h3>
                    <div id="home-score">
                        <p id="home-count">0</p>
                    </div>
                    <div class="count-btns">
                        <button id="one-btn" onclick="plusOneHome()">+1</button>
                        <button id="two-btn" onclick="plusTwoHome()">+2</button>
                        <button id="three-btn" onclick="plusThreeHome()">+3</button>
                    </div>
                </div>
                <div>
                    <h3>GUEST</h3>
                    <div id="guest-score">
                        <p id="guest-count">0</p>
                    </div>
                    <div class="count-btns">
                        <button id="one-btn" onclick="plusOneGuest()">+1</button>
                        <button id="two-btn" onclick="plusTwoGuest()">+2</button>
                        <button id="three-btn" onclick="plusThreeGuest()">+3</button>
                    </div>
                </div>
            </div>
                <div id="new-game">
                    <button id="new-btn" onclick="newGame()">New Game</button>
                </div>
        </div>

css changes

.container {
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #1B244A;
    width: 575px;
    height: 385px;
}

.board{
    display: flex;
    justify-content: space-around;
}

p, h3 {
    margin: 0;
    padding: 0;
}

#new-game{
    margin: 0 auto;
}

[jaunty imp]

You're the best! 🥳 I'll take a deeper look in your changes, just copy-pasted them for now to see if it works. But thank you so much!

[solar vine]

To be honest, what @granite skiff suggested is easier. Not sure why you would want that specific height and width.
The Figma designs that you get from scrimba are for reference. you are not meant to copy-paste the exact design to the exact pixels itself

[jaunty imp]

Thanks for this feedback too. Sometimes I just have something in mind and I want to see that on my screen 🙈

Now I found a new problem: If i hit 'new game' the numbers go back to 0 but if I click +1 again, it continues counting. But I'll try to figure this on my own 🙂

[granite skiff]

@jaunty imp there is usually a way to do most things in web development, it's just a matter of how many hoops you are willing to jump through to get your vision on the screen.

[jaunty imp]

I understand, thank you for this lesson 🙂