Adjust the margin property by moving it from .wrapper to body, changing it to padding. Next, transfer the background property from body to .wrapper and apply a small margin to .wrapper.
Modifications:
body{
/* Remove background: #8e44ad;*/
/* Add padding: 50px 20px 50px 20px;*/
}
.wrapper {
/* Remove margin: 50px 20px 50px 20px; */
/* Add background: #8e44ad; */
/* Add padding: 20px; */
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: white;
padding: 50px 20px 50px 20px;
}
body:not(.wrapper.group) {
/* background: white;*/
}
.wrapper {
background: #8e44ad;
padding: 20px;
/* background-color: chartreuse; */
border: 2px solid #fff;
border-radius: 5px;
/* background: #8e44ad;
color: white; */
}
h1 {
margin: 0 0 1em;
}
.group {
display: flex;
align-items: center;
margin-bottom: 2em;
}
.newdiv {
margin-top: 200px;
display: flex;
flex-direction: row;
}
.group1 {
display: flex;
flex-direction: column;
}
group3 {
display: flex;
flex-direction: column;
}
input[type="checkbox"],
input[type="radio"] {
position: absolute;
opacity: 0;
z-index: -1;
}
label {
position: relative;
margin-right: 1em;
padding-left: 2em;
padding-right: 1em;
line-height: 2;
cursor: pointer;
}
label:before {
box-sizing: border-box;
content: " ";
position: absolute;
top: 0.3em;
left: 0;
display: block;
width: 1.4em;
height: 1.4em;
border: 2px solid white;
border-radius: 0.25em;
z-index: -1;
}
input[type="radio"] + label::before {
border-radius: 1em;
}
/* Checked */
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
padding-left: 1em;
color: #8e44ad;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
top: 0;
width: 100%;
height: 2em;
background: white;
}
/* Transition */
label,
label::before {
-webkit-transition: 0.25s all ease;
-o-transition: 0.25s all ease;
transition: 0.25s all ease;
}
<div class="wrapper">
<h1>Pure CSS Fancy Checkbox/Radio</h1>
<h2>Radio Buttons</h2>
... (truncated for brevity)
<label for="q1r">Blood clots</label> <br />
</div>
</div>