Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Patrick Beugger
Patrick Beugger
14,600 Points

how do i add a 4th question to MASH?

im trying to add a 4th question but the form, body and html tags keep showing red and i cant figure out why... also i cant get seem to resize the categorys just right so they all fit nicely above the submit button

EDIT:OK finally figured out how to edit my post

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">

  <title>Monster MASH</title>
  <link href="normalize.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>

  <h1 class="logo"><img src="img/alien-29939.svg" width="400" height="400" /></h1>
  <p class="description">Fill in the blanks to find out what monster you will encounter.</p>

<form action="" method="post" id="mash">

  <div id="answers" class="hide">
      <p>You will see a <span id="location"></span> at <span id="pet"> eating</span><span id="profession">who is wearing a<span id="wear"> </span>.
  </div>

  <div class="bucket">

    <div class="choice-bucket">
      <h4 class="highlight">What monster will you see??</h4>
        <input name="location[]" type="text">
        <input name="location[]" type="text">
        <input name="location[]" type="text">
        <input name="location[]" type="text">
      </div>

      <div class="choice-bucket">
        <h4 class="highlight">Where will you see the monster?</h4>
          <input name="profession[]" type="text">
          <input name="profession[]" type="text">
          <input name="profession[]" type="text">
          <input name="profession[]" type="text">
      </div>

     <div class="choice-bucket">
        <h4 class="highlight">What is the monster eating?</h4>
          <input name="pet[]" type="text">
          <input name="pet[]" type="text">
          <input name="pet[]" type="text">
          <input name="pet[]" type="text">

       <div class="choice-bucket">
        <h4 class="highlight">What is the monster wearing?</h4>
          <input name="wear[]" type="text">
          <input name="wear[]" type="text">
          <input name="wear[]" type="text">
          <input name="wear[]" type="text">


  </div>

  <input type="submit" value="Tell my fortune">

</form>
<script src=""></script>
</body>
</html>

and heres my CSS code part im trying to resize so the answers all fit...from what i understand from the video form the treehosue club mash course this is the part i need to edit 

.choice-bucket {
  width: 33.3333333%;
  float: left;
  display: inline-block;
  margin: 0;
  padding: 0;
}