CSS Радио секция не укладывается сверху?

Question

Я пытаюсь расположить ярлыки переключателей друг над другом с помощью переключателя справа от ярлыка

Вот мой HTML

<p>Instagram destorys the younger generation:</p>
                <div class="instagram">
                <input type="radio" name="instagram" value="agree" id="agree">
                <label for="agree">Agree</label>

                <input type="radio" name="instagram" value="disagree" id="agree">
                <label for="disagree">Disagree</label>

                <input type="radio" name="instagram" value="strongly" id="agree">
                <label for="strongly">Strongly Disagree</label><br>
                <br>
            </div>

Здесь мой CSS

/* the styles for the elements */

body {
    font-family: Arial, Helvetica, sans-serif;
    width: 900px;
    margin: 0 auto;
    padding: 0;
    box-shadow: 0 10px 20px 10px;
}
h1, h2, h3, p {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    font-weight: bold;
}
a:hover, a:focus { 
    color: maroon;
}
/* the styles for the header */
header {
    border-bottom: 3px solid #FFD300;
        background-image: -moz-linear-gradient(
        30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
    background-image: -webkit-linear-gradient(
        30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
    background-image: -o-linear-gradient(
        30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
    background-image: linear-gradient(
        30deg, #000000 0%, #FFD300 30%, white 50%, #00000080 80%, #2641B3 100%);
    padding: 15px 30px; 

} 
header img { 
    float: left; 
} 
header h2 {
    font-size: 250%;
    font-style: italic;
    color: steelblue;
    text-indent: 45px;
    text-shadow: 3px 3px 3px steelblue;
    margin-bottom: .3em;
}
header h3 {
    font-size: 150%;
    text-indent: 45px;
    padding-bottom: .75em;       
}

/* the styles for the navigation menu */
#nav_menu {
    clear: left;

}
#nav_menu ul {
    list-style: none;
    position: relative;
    display: flex;
    justify-content: space-evenly;
}
#nav_menu ul li {
    float: left;
}
#nav_menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
}
#nav_menu ul ul li {
    float: none;
}
#nav_menu ul li:hover > ul {
    display: block;
}
#nav_menu > ul::after {
    content: "";
    clear: both;
    display: block;
}
#nav_menu ul {
    margin: 0;
    padding: 0;
}
#nav_menu ul li a {
    text-align: center;
    display: block;
    width: 180px;
    padding: .7em 0;

    font-weight: bold;
    color: white;
}
#nav_menu ul li a.current {
    color: black;
}
#nav_menu ul li a:hover, #nav_menu ul li a:focus {
    background-color: lightsteelblue;
}

/* the styles for the section */

section {
    width: 565px;
    float: right;
    padding: 25px 30px;
}
section h1 {
    font-size: 160%;
    margin-bottom: .3em;
}
section p {
    font-size: 100%;
    margin-bottom: .7em;
}
/*thestyle for the form*/
fieldset {
    margin-bottom: .5em;
    padding: .5em 1em;

}
fieldset p {
    font-size: 90%;
    margin-bottom: .5em;
}

legend {
    font-weight: bold;
    font-size: 90%; 
    padding-bottom: .9em;
}
label, input, select {
    font-size: 90%;
}
label {
    display: block;
    width: 9em; 
    text-align: right;
}


input, select {
    width: 15em;
    margin-left: .5em;
    margin-bottom: .7em;
}


input:required, input[required] input:invalid 
{
    border: 2px solid maroon;
}
input:valid {
    border: 1px solid black; 
}
input:invalid {
    box-shadow: none;

}
br {
    clear: both;
}
#buttons input {
    width: 10em; 
}
textarea {
    height: 10em;
    width: 40em;
    margin-left: 2.5em;
    font-family: Arial, Helvetica, sans-serif;
}
#lifestyle label, #food label, #comments label {
    float: none; 
}
#lifestyle input, #food input {
    width: auto; 
    margin-left: 3em; 
}
#buttons input {
    width: 10em; 
}
#submit {
    margin-left: 3em;

}

/* the styles for the sidebar */
aside {
    float: left;
    width: 245px;
    padding: 25px 0 0 30px;
}
aside h2 {
    font-size: 130%;    
    color: maroon;
    margin-bottom: 8px;
}
aside ul {
    line-height: 1.5;
    margin: 0;
    padding-left: 16px;
}
aside a:link, aside a:visited { 
    color: steelblue;
}
aside a:hover, aside a:focus {
    color: maroon;
}

/* the styles for the footer */
footer { 
    clear: both;
    padding: 15px 30px;
    background-color: steelblue;
} 
footer p {
    text-align: center;
    font-size: 85%;
    color: white;    
}

.instagram, #agree {
    display: inline;
    justify-content: flex-start;
    text-align: left;
    width: 1rem;
}

Полный HTML ниже

<main>

<section>
            <h1>Opinion about Social Media</h1>
            <p>Please answer the questions honestly!</p>
             <form action="opinion_request.html" method="get" id="opinions_form">

             <fieldset>
                <legend>Please try to answer every question</legend><br><br>
                <label for="name">Full name:</label>
                <input type="text" id="name" autofocus required><br><br>

                <label for="email">Email:</label>
                <input type="email" id="email" required><br><br>

               <label for="gender">Gender:</label>
                <select id="gender">
                <option value="none">Select a Gender</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
                 </select><br><br>

                <label>How many hrs per day do you use Social Media?:</label>
                <select id="age">
                <option value="none">Select your choice</option>
                <option value="1-2hrsr">1-2hrs</option>
                <option value="2-4hrs">2-4hrs</option>
                <option value="5hrs+">5hrs+</option>
                </select><br><br>

                <label for="social">List 2 social medias that you use the most:</label>
                 <input type="text" id="social" placeholder="Example: Instagram, Twitter, Facebook"><br><br>

                <label for="rate">Rate Twitter from 1 to 5:</label>
                <input type="range" id="rate"
                    min="1" max="5" step="1"><br><br>                 
                </fieldset> 

                <fieldset> 

                <legend>Survey</legend><br>

                Date you first started social media:&nbsp;&nbsp;
                <input type="date" id="date"><br><br>


                <p>Instagram destorys the younger generation:</p>
                <div class="instagram">
                <input type="radio" name="instagram" value="agree" id="agree">
                <label for="agree">Agree</label>

                <input type="radio" name="instagram" value="disagree" id="agree">
                <label for="disagree">Disagree</label>

                <input type="radio" name="instagram" value="strongly" id="agree">
                <label for="strongly">Strongly Disagree</label><br>
                <br>
            </div>

                <p>Linkedin is the best networking social media:</p>


                <input type="radio" name="link" value="agree" id="agree">
                <label for="agree">Agree</label>

                <input type="radio" name="link" value="disagree" id="agree">
                <label for="disagree">Disagree</label>

                <input type="radio" name="link" value="strongly" id="agree">
                <label for="strongly">Strongly Disagree</label><br><br>

                <p>Tiktok is the next big social media:</p>


                <input type="radio" name="tiktok" value="agree" id="agree">
                <label for="agree">Agree</label>

                <input type="radio" name="tiktok" value="disagree" id="agree">
                <label for="disagree">Disagree</label>

                <input type="radio" name="tiktok" value="strongly" id="agree">
                <label for="strongly">Strongly Disagree</label><br><br>



                <p>Facebook is the most popular social media:</p>


                 <input type="radio" name="fb" value="agree" id="agree">
                <label for="agree">Agree</label>

                <input type="radio" name="" value="disagree" id="agree">
                <label for="disagree">Disagree</label>

                <input type="radio" name="social" value="strongly" id="agree">
                <label for="strongly">Strongly Disagree</label><br><br>

                </fieldset>

                <fieldset><br>
                <legend>Comments:</legend>
                <p>In 10 years do you think you'll still use social media? Why or why not?</p>
                <textarea id="text-area">
                </textarea>  
                </fieldset>
                <br>

                 <fieldset id="buttons">
                    <legend>Process your information</legend><br>
                    <input type="submit" id="submit" value="Submit now">
                    <input type="reset" id="submit" value="start over">
                </fieldset>

                    </form>  

    </section>                                

</main>

Вот фото того, как оно в данный момент выглядит и как я хочу, чтобы оно выглядело

Answer 1

Я сделал пару div вокруг, потому что это делает его чистым и последовательным во всех вариантах. важная вещь используется flex, так что она делает элементы встроенными, надеюсь, она подойдет вам:

body {
  font-family: Arial, Helvetica, sans-serif;
  width: 900px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: 0 10px 20px 10px;
}

h1,
h2,
h3,
p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  font-weight: bold;
}

a:hover,
a:focus {
  color: maroon;
}


/* the styles for the header */

header {
  border-bottom: 3px solid #FFD300;
  background-image: -moz-linear-gradient( 30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
  background-image: -webkit-linear-gradient( 30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
  background-image: -o-linear-gradient( 30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
  background-image: linear-gradient( 30deg, #000000 0%, #FFD300 30%, white 50%, #00000080 80%, #2641B3 100%);
  padding: 15px 30px;
}

header img {
  float: left;
}

header h2 {
  font-size: 250%;
  font-style: italic;
  color: steelblue;
  text-indent: 45px;
  text-shadow: 3px 3px 3px steelblue;
  margin-bottom: .3em;
}

header h3 {
  font-size: 150%;
  text-indent: 45px;
  padding-bottom: .75em;
}


/* the styles for the navigation menu */

#nav_menu {
  clear: left;
}

#nav_menu ul {
  list-style: none;
  position: relative;
  display: flex;
  justify-content: space-evenly;
}

#nav_menu ul li {
  float: left;
}

#nav_menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

#nav_menu ul ul li {
  float: none;
}

#nav_menu ul li:hover>ul {
  display: block;
}

#nav_menu>ul::after {
  content: "";
  clear: both;
  display: block;
}

#nav_menu ul {
  margin: 0;
  padding: 0;
}

#nav_menu ul li a {
  text-align: center;
  display: block;
  width: 180px;
  padding: .7em 0;
  font-weight: bold;
  color: white;
}

#nav_menu ul li a.current {
  color: black;
}

#nav_menu ul li a:hover,
#nav_menu ul li a:focus {
  background-color: lightsteelblue;
}


/* the styles for the section */

section {
  width: 565px;
  float: right;
  padding: 25px 30px;
}

section h1 {
  font-size: 160%;
  margin-bottom: .3em;
}

section p {
  font-size: 100%;
  margin-bottom: .7em;
}


/*thestyle for the form*/

fieldset {
  margin-bottom: .5em;
  padding: .5em 1em;
}

fieldset p {
  font-size: 90%;
  margin-bottom: .5em;
}

legend {
  font-weight: bold;
  font-size: 90%;
  padding-bottom: .9em;
}

label,
input,
select {
  font-size: 90%;
}

label {
  display: block;
  width: 9em;
  text-align: right;
}

select {
  width: 15em;
  margin-left: .5em;
  margin-bottom: .7em;
}

input:required,
input[required] input:invalid {
  border: 2px solid maroon;
}

input:valid {
  border: 1px solid black;
}

input:invalid {
  box-shadow: none;
}

br {
  clear: both;
}

#buttons input {
  width: 10em;
}

textarea {
  height: 10em;
  width: 40em;
  margin-left: 2.5em;
  font-family: Arial, Helvetica, sans-serif;
}

#lifestyle label,
#food label,
#comments label {
  float: none;
}

#lifestyle input,
#food input {
  width: auto;
  margin-left: 3em;
}

#buttons input {
  width: 10em;
}

#submit {
  margin-left: 3em;
}


/* the styles for the sidebar */

aside {
  float: left;
  width: 245px;
  padding: 25px 0 0 30px;
}

aside h2 {
  font-size: 130%;
  color: maroon;
  margin-bottom: 8px;
}

aside ul {
  line-height: 1.5;
  margin: 0;
  padding-left: 16px;
}

aside a:link,
aside a:visited {
  color: steelblue;
}

aside a:hover,
aside a:focus {
  color: maroon;
}


/* the styles for the footer */

footer {
  clear: both;
  padding: 15px 30px;
  background-color: steelblue;
}

footer p {
  text-align: center;
  font-size: 85%;
  color: white;
}

.instagram,
.facebook,
.tiktok,
.linkedin {
  justify-content: space-between;
  text-align: center;
  width: auto;
  margin-left: 15%;
}

.opinioncolumn {
  display: flex;
  flex-direction: column;
}

.opinionRow {
  display: flex;
}

<main>

  <section>
    <h1>Opinion about Social Media</h1>
    <p>Please answer the questions honestly!</p>
    <form action="opinion_request.html" method="get" id="opinions_form">

      <fieldset>
        <legend>Please try to answer every question</legend><br><br>
        <label for="name">Full name:</label>
        <input type="text" id="name" autofocus required><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" required><br><br>

        <label for="gender">Gender:</label>
        <select id="gender">
          <option value="none">Select a Gender</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
          <option value="other">Other</option>
        </select><br><br>

        <label>How many hrs per day do you use Social Media?:</label>
        <select id="age">
          <option value="none">Select your choice</option>
          <option value="1-2hrsr">1-2hrs</option>
          <option value="2-4hrs">2-4hrs</option>
          <option value="5hrs+">5hrs+</option>
        </select><br><br>

        <label for="social">List 2 social medias that you use the most:</label>
        <input type="text" id="social" placeholder="Example: Instagram, Twitter, Facebook"><br><br>

        <label for="rate">Rate Twitter from 1 to 5:</label>
        <input type="range" id="rate" min="1" max="5" step="1"><br><br>
      </fieldset>

      <fieldset>

        <legend>Survey</legend><br> Date you first started social media:&nbsp;&nbsp;
        <input type="date" id="date"><br><br>


        <p>Instagram destorys the younger generation:</p>
        <div class="instagram">
          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="agree">Agree</label>
              <input type="radio" name="instagram" value="agree" id="agree">
            </div>
          </div>

          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="disagree">Disagree</label>
              <input type="radio" name="instagram" value="disagree" id="agree">
            </div>


          </div>

          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="strongly">Strongly Disagree</label><br>
              <input type="radio" name="instagram" value="strongly" id="agree">
            </div>
          </div>

          <br>
        </div>

        <p>Linkedin is the best networking social media:</p>
        <div class="linkedin">

          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="agree">Agree</label>
              <input type="radio" name="link" value="agree" id="agree">
            </div>
          </div>

          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="disagree">Disagree</label>
              <input type="radio" name="link" value="disagree" id="agree">


            </div>
          </div>

          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="strongly">Strongly Disagree</label>
              <input type="radio" name="link" value="strongly" id="agree">
              <br><br>
            </div>
          </div>
          <br>
        </div>

        <p>Tiktok is the next big social media:</p>

        <div class="tiktok">
          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="agree">Agree</label>
              <input type="radio" name="tiktok" value="agree" id="agree">

            </div>
          </div>


          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="disagree">Disagree</label>
              <input type="radio" name="tiktok" value="disagree" id="agree">

            </div>
          </div>


          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="strongly">Strongly Disagree</label>
              <input type="radio" name="tiktok" value="strongly" id="agree">
              <br><br>
            </div>
          </div>

        </div>

        <p>Facebook is the most popular social media:</p>
        <div class="facebook">

          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="agree">Agree</label>
              <input type="radio" name="fb" value="agree" id="agree">

            </div>
          </div>


          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="disagree">Disagree</label>
              <input type="radio" name="" value="disagree" id="agree">

            </div>
          </div>


          <div class="opinioncolumn">
            <div class="opinionRow">
              <label for="strongly">Strongly Disagree</label><br><br>
              <input type="radio" name="social" value="strongly" id="agree">

            </div>
          </div>
        </div>
      </fieldset>

      <fieldset><br>
        <legend>Comments:</legend>
        <p>In 10 years do you think you'll still use social media? Why or why not?</p>
        <textarea id="text-area">
                </textarea>
      </fieldset>
      <br>

      <fieldset id="buttons">
        <legend>Process your information</legend><br>
        <input type="submit" id="submit" value="Submit now">
        <input type="reset" id="submit" value="start over">
      </fieldset>

    </form>

  </section>

</main>

Answer 2

Вы можете добавить несколько css правил для достижения желаемого результата. Добавьте следующие css правила.

#opinions_form input[type=radio]~label::after {
    height: 1px;
    width: 100%;
    display: block;
    content: '';
}

и удалите правило display:block в label селекторе. Измените его на следующий.

label {
    width: 9em; 
    text-align: right;
}

Проверьте эту ссылку на кодовый указатель. https://codepen.io/aryantw/pen/vYNOWOL