how do I make it so i have 2 columns of buttons, on the same level?

so i have 4 buttons on the left side, and 2 on the right. Right now the right ones are under the left ones (but still on the right), but I want them to be on the same level.

so this is what my code looks like rn i want it to look something like this

Code:

body {
    background-color: #292929;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    color: #FFFFFF;
}

div {
    display: block;
}

div.container {
    position: relative;
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin: auto;
    padding: auto;
    box-sizing: border-box;
}

.button,
button {
    display: inline-block;
    text-decoration: none;
    height: 48px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    width: 300px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.1px;
    white-space: wrap;
    border-radius: 8px;
    cursor: pointer;
}

button:hover,
.button:focus {
    color: #333;
    border-color: #888;
    outline: 0;
}

.button_social,
button_social {
    display: inline-block;
    text-decoration: none;
    height: 48px;
    text-align: center;
    margin-right: 1150px;
    vertical-align: middle;
    font-size: 18px;
    width: 300px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.1px;
    white-space: wrap;
    border-radius: 8px;
    cursor: pointer;
}

button_social:hover,
.button_social:focus {
    color: #333;
    border-color: #888;
    outline: 0;
}

.button_discord,
button_discord {
    display: inline-block;
    text-decoration: none;
    height: 48px;
    text-align: center;
    margin-left: 350px;
    vertical-align: middle;
    font-size: 18px;
    width: 300px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.1px;
    white-space: wrap;
    border-radius: 8px;
    cursor: pointer;
}

button_discord:hover,
.button_discord:focus {
    color: #333;
    border-color: #888;
    outline: 0;
}

.button.button-primary {
    color: #FFF;
    filter: brightness(90%)
}

.icon {
    padding: 0px 8px 3.5px 0px;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.button_social.button-discord {
    color: #FFFFFF;
    background-color: #5865F2
}

.button_social.button-discord:hover,
.button_social.button-discord:focus {
    filter: brightness(90%)
}


/* Github */
.button_social.button-github {
    color: #FFFFFF;
    background-color: #000000
}

.button_social.button-github:hover,
.button_social.button-github:focus {
    filter: brightness(90%)
}

/* Twitch */
.button_social.button-twitch {
    color: #FFFFFF;
    background-color: #9146ff
}

.button_social.button-twitch:hover,
.button_social.button-twitch:focus {
    filter: brightness(90%)
}

/* YouTube */
.button_social.button-youtube {
    color: #FFFFFF;
    background-color: #000000
}

.button_social.button-youtube:hover,
.button_social.button-youtube:focus {
    filter: brightness(90%)
}

CodePudding user response：

As Mister Jojo already has stated it's a bit tricky to help you all the way with just the CSS, but a few solutions that I think would help are:

• Making a grid for your buttons MDN Docs for CSS Grid
• Displaying the buttons with flex (mabey in flex-direction: column; with flex-wrap: wrap; to allow wrapping to the next column) MDN Docs for CSS Flex
• A HTML structure where they are in separate containers (divs?) that are half the width of your desired area and are set to display: inline-block

Any of these would probably do the trick but without your HTML it's hard to say what solution would fit you best

CodePudding user response：

You need to wrap those buttons inside a <div> for example. Than those two divs should be placed one next to other.

CodePudding user response：

Try using flexbox. Your container should include display: flex. You can justify and align your items. Here is more about flex

CodePudding user response：

Use grid/ flex system.

You can also try to use tailwind.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 1px solid greenyellow;
}

button {
    background: black;
    color: white;
    padding: 0.5em 1em 0.5em 1em;
    border-radius: 0.5em;
}

.container {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1em;
    padding: 1em;
}

.btn-wrap {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

    <div >
        <div >
            <button>github</button>
            <button>discord</button>
            <button>twitch</button>
            <button>youtube</button>
        </div>
        <div >
            <button>chattotwitch discord bot</button>
            <button>lightning discord bot</button>
        </div>
    </div>