Place 3 radial options in same line and distance from each other - Survey form project

I would like to place the 3 radial options in the same line, equally distant from each other, using the whole space available.

I’ve seen solutions on google using stuff I didn’t learn yet, I’ve been trying to figure it out for too long using the tools shown so far.

By the way, the survey I’m guessing can be about anything? Took the chance to play around, I wish I had finished it already but I got stuck trying to to this, I want the radial inputs in a single line to be visually distinct from the checkboxes.
I was able to do it once by using margin-right set to around ~20%, but it’s cheating and gets all messy when I squeeze the window.

And is it better to just do anything and move on with the course instead of trying to achieve something useless?

Your code so far

<!DOCTYPE html>
<html lang="en"/>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>PC Gaming - Digital Stores and Lauchers Survey Form</title>
    <link rel="stylesheet" href="styles.css"/>
    <h1 class="title" id="title">PC Gaming - Digital Stores and Launchers Survey Form</h1>
    <p class="title" id="description"><strong>Thank you</strong> for helping us better understand how multiple digital stores affect customer's satisfaction!</p>
    <form id="survey-form">
        <label id="name-label">Name<input class="fill-line" placeholder="Your name" id="name" type="text" required/></label>
        <label id="email-label">Email<input class="fill-line" placeholder="" id="email" type="email" required/></label>
        <label id="number-label" class="drop-box">Age<input placeholder="Optional" type="number" min="13" max="120"/></label>
        <label>What's your favorite digital games store and launcher? 
          <select id="dropdown">
            <option value="">(choose one)</option>
            <option value="1">Steam</option>
            <option value="2">Epic Games Store</option>
            <option value="3">GOG</option>
            <option value="4"></option>
            <option value="5">Origin</option>
            <option value="6"></option>
            <option value="7">Ubisoft Connect (former uPlay)</option>
            <option value="8">Other - Please specify</option>
          <input id="other-store" type="text" placeholder="If Other, name the store"/>
        <!--Need some help here-->
        <label>Which platform do you use the most to play games?
          <!--these should be in the same line, sharing equal space-->
         <label class="get-help"><input type="radio" name="preferred-platform">PC</label>
         <label class="get-help"><input type="radio" name="preferred-platform">Consoles</label>
         <label class="get-help"><input type="radio" name="preferred-platform">Mobile</label>
          What are the main reasons for you to use stores/launchers other than your favorite? <i>Check all that apply</i>:
          <label class="to-block"><input type="checkbox" value="cheap-price"/>Cheaper prices</label>
          <label class="to-block"><input type="checkbox" value="ease-use"/>Ease of use and/or user interface</label>
          <label class="to-block"><input type="checkbox" value="free-games"/>Free games and/or giveaways</label>
          <label class="to-block"><input type="checkbox" value="exclusive-games"/>Exclusive games (Fortnite, CoD...)</label>
          <label class="to-block"><input type="checkbox" value="season-events"/>Seasonal events / offers / discounts</label>
          <label class="to-block"><input type="checkbox" value="games-catalog"/>Large catalog of games</label>
          <label class="to-block"><input type="checkbox" value="classic-catalog"/>Classic, older games in general</label>
          <label class="to-block"><input type="checkbox" value="new-games"/>New game releases</label>
          <label class="to-block"><input type="checkbox" value="community-ideas"/>Community to share and discuss ideas</label>
          <label class="to-block"><input type="checkbox" value="community-mods"/>Community to share game mods and files</label>
          <label class="to-block"><input type="checkbox" value="download-speed"/>Games download speed and installation times</label>
          <label class="to-block"><input type="checkbox" value="tech-support"/>Technical support and customer service</label>
          <label class="to-block"><input type="checkbox" value="pay-options"/>Payment options</label>
          <label class="to-block"><input type="checkbox" value="refund-policy"/>Refund policy</label>
        <label>There is a rumor about Sony releasing a new store and launcher for PC, possibly to avoid sharing 30% of its profit with Steam for future game releases. What's your opinion if it turns out to be true? <textarea id="user-opinion" rows="5" cols="65" placeholder="(Optional) I think a new Sony store and launcher on PC would be..."></textarea></label>
      <input type="submit" value="Submit"/>

body {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  background-color: hsl(120, 70%, 85%);
  background-image: linear-gradient( hsl(120, 70%, 85%), hsl(120, 70%, 95%), hsl(120, 70%, 85%));
  font-family: Tahoma;
  color: hsl(270, 80%, 25%);
  font-size: 19px;
.title {
  text-align: center;
  margin: 5px auto;
  padding: 0 0.5em;
form {
  min-width: 300px;
  max-width: 600px;
  padding-bottom: 20px;
  margin: 20px auto;
.to-block {
  display: block;
  margin: 2px 0px;
textarea, .fill-line {
  width: 100%;
strong:hover {
  color: hsl(285, 100%, 50%);
option:first-child {
  text-align: center;
.drop-box {
  margin-right: 100%;
/*just one of things I've tried*/
.get-help {
  display: block;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

I think you should do it. Look up “css grid layout” online. It might be a bit hard to understand immediately but it will solve this issue for you.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.