How can I make three divs fit the screen without expanding, with each one touching a different edge of the screen? The first should touch the left edge, the second in the middle and the third on the right edge.
Check out this code snippet for reference
To play the games, click on the buttons below:
Game 1
</div>
<div class="container">
<div class="linktopage">
<br />
Click on the button below
<br />
<button>
Game 2
</button>
</div>
</div>
<div class="container">
<div class="linktopage">
<br />
Click on the button below
<br />
<button>
Game 3
</button>
</div>
</div>
.container {
text-align: center;
display:inline-block;
}
.linktopage {
text-align: center;
background-color: floralwhite;
color: darkblue;
height: 25vmin;
width: 50vmin;
display: inline-block;
border-style: outset;
border-radius: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 4vmin;
}
button {
text-align: center;
display: inline-block;
background-color: dodgerblue;
border-radius: 20px;
color: darkblue;
height: 10vmin;
width: 30vmin;
}