In my header element I want to vertical align two buttons

Hi there,

Not sure if I fully understand.

This looks pretty good to me?
https://www.screencast.com/t/AfGAdAHW

What needs to change?

Hello, this is my code. You can see I try to work around my problem, how to create two buttons with the same width. Lots of & nbsp; Looks o.k. horizontal aligned, doesn't fit 100% vertically aligned.

`-div class="page-hero-buttons"-
-a class="button" href="https://login.apis.tools" rel="nofollow" style="background-color:#FF8000; border-radius: 5px; padding:10px; margin:10px;"--strong- & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; LOGIN | app.apis.tools & nbsp; & nbsp; & nbsp; & nbsp;-/strong--/a-
-a class="button" href="https://register.apis.tools" rel="nofollow" style="background-color:#FF8000; border-radius: 5px; padding:10px;"--strong- REGISTER | register.apis.tools -/strong--/a-
-/div-

I replaced < > with --

This is the css (I took it from one of your examples from the tutorial):

.page-hero-content {
background: rgba(255,255,255,0.8);
padding: 20px;
border: 5px solid rgba(211,211,35,0.2);
border-radius: 10px;
max-width: 600px;
}

@media (max-width: 1200px) {
.page-hero-content {
padding: 10px;
margin: auto;
}
}

.inside-page-hero {
display: -ms-grid;
display: grid;
grid-template-areas: "left right";
-ms-grid-columns: 50% 50%;
grid-template-columns: 50% 50%;
}

.page-hero-content {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: left;
}

@media (max-width: 768px) {
.inside-page-hero {
display: block;
}
}

Regards Klaus

Hi there,

you can add a Flex column to your buttons container - by default the block elements will then fill the space available:

@media(max-width: 768px) {
    .page-hero-buttons {
        display: flex;
        flex-direction: column;
    }
}

On your first button you have margin: 10px; - change this to margin-bottom: 10px;

Hello David, yes, did it, thank you, looks better.

Glad to hear that