Okey. Here you go, I think I was able to get it working for you.
Here are the modifications with explanations. You can, of course, view the full code in CodePen.
/* make body have full viewport */
html, body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
/* Create a parent container for the child containers.
* Take up full viewport (you can change this on other projects obviously)
* Center the child items using flexbox.
*/
.bigContainer {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
/* give container height and width properties */
.container {
position: relative;
height: 100px;
width: 100px;
}
/* Use margin to separate containers.
* No margin on last element.
*/
.container:not(:last-of-type) {
margin-right: 20px;
}
/* Do not display radio button */
.container input {
display: none;
}
/* Center this checkmark inside the container */
.checkmark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Like I mentioned earlier, your biggest problems were positioning. Here is a crude drawing of what the elements of your pen actually looked like:
If you want to see yourself, I recommend highlighting the elements in developer tools to see where they all are. Your containers had no height or width, just padding. Your radio buttons were not even inside the containers, but were below them. Your containers were also not centered, but at the top left. It is hard to center elements with position absolute and relative if you don’t have the inside containers centered correctly.
Here is what my changes did:
I made a big container which centered all of the elements inside it. I then gave each of the containers dimensions of 100px. I put the radio buttons inside them and centered them. I then made sure the margin wasn’t applied to the last element.
I hope this helps you understand the problem, please let me know if it helped or you are still struggling!
Also, congrats on styling the buttons from dribbble - they look really great! 