Testing 1-2

HTML

<link rel="stylesheet" href="./styles/style.css">


<div id="container">
<h1>Roll With It!</h1>
<h2>Board Game Café, North Coast!</h2>
<img class="hero_img" src="./images/placeholder-img-1.jpg" alt="A placeholder image.">
<h2>Some of our specialities:</h2>

<div class="column">
<h3>All the games!</h3>
<img src="./images/placeholder-img-1.jpg" alt="a placeholder image.">
<p class="align-left">An expansive (and growing!) selection of your favourite board games! From the classics you know so well and some unfamiliar ones to learn together!</p>
</div>

<div class="column"><h3>Snacks and cakes!</h3>
    <img src="./images/placeholder-img-1.jpg" alt="a placeholder image.">
    <ul class="align-left">
<li>A wide range of hot drinks!</li>
<li>Selection of cakes and buns!</li>
<li>Savoury snacks!</li>
<li>Vegetarian and Vegan options!</li>
<li>No sticky fingers!</li>
    </ul>
</div>

<div class="column">
<h3>Great craic!</h3>
<img src="./images/placeholder-img-1.jpg" alt="a placeholder image.">
    <p class="align-left">Whether you're a competitive pro-gamer or a group of friends looking for fun, or perhaps braving a second date, we've got what you need! We even have a few solo games if you want some time away from the rest!</p>
</div>

<h2 class="link_text">Click Here to Book a Seat!!</h2>
<a href="https://www.instagram.com/boardgaminggeek/" target="_blank">Link to website</a> 
</div>

CSS

* {
    box-sizing: border-box;
}

body {

text-align: center;
background-color: #fffbf3;
}

#container {
    align-content: center;
background-color:#d95440;
height: 100vh;
width: 80vw;
margin: auto;
}


.column {
display: flexbox;
padding: 10px;
border-radius: 30px;
background-color: #fffbf3;
float: left;
width: 33.33%;
height: 50vh;
}




.align-left {
    text-align: left;
}