buttons with css grid won't align-CodePudding

I have a pretty simple site of 2 buttons that I need to align at the bottom of the site using grid. While justify- works properly, align- doesn't work at all. Could you please help me solve this issue? Thanks a lot in advance!

I've tried setting height to container as well as to .buttons and .next-button, .back-button. I've tried display: flex on .buttons and .next-button, .back-button too and the align- just doesn't work anyway.

Here's my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping cart</title>
    <link rel="stylesheet" href="styles.css">



</head>
<body>
    <header>

    <div >
    
        <div >
        
            <a href='www.shopping.com' >
            BACK</a>

            <a href='shopping-cart.php' >
            NEXT</a>

        </div>
    </div>
    
    </header>

    <main>
    

    </main>

    <footer>

    <?php include "footer.php" ?>

    </footer>

    
</body>
</html>

and here's my CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
}

a {
    text-decoration: none;
    color: white;
    }


.container {
    width: 75vw;
    margin: 0 auto;
}



/******* Header *******/

header {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img/macbook.jpg");
    background-size: cover;
    height: 100vh;
    background-attachment: fixed;
    color: white;
    position: relative;
   
}


.buttons {
    padding: 1vw;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    justify-self: center;
    align-self: end;
} 


.next-button, .back-button {
    border: 3px dotted rgba(97, 136, 150, 0.959);
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    text-align: center;
    color: white;
    font-size: 15px;
    font-family: Arial;
    box-shadow: 12px 7px 12px rgba(128, 128, 128, 0.181);
    border-radius: 15px;
    background: linear-gradient(rgba(4, 65, 85, 0.2), #12688580);
}


.back-button:hover,
.next-button:hover,
.back-button:active,
.next-button:active {
transition: background 0.5s;
background: #6dc3e063;
}

CodePudding user response：

I added height and flex to your container

.container {
  width: 75vw;
  margin: 0 auto;
  height: 100%;
  display: flex;
}

Also updated button class with 100% width.

.buttons {
  padding: 1vw;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  align-self: end;
}

here is codepen https://codepen.io/ignasb/pen/BaPYQbp :-)