So, I'm trying to make a faq page for my tumblr and I want the same size box, font, and icon for each question/answer so I am using classes and I was having a hard time with the text but I finally managed to get it! The problem is, the icon. I've been trying forever to get it to repeat and position evenly? (like down a bit as it's too high compared to the text) but I just can't figure it out. I've tried margin positioning, position:absolute; and floating but nothing seems to workout.

```css
body{
    background-color: #fff;
    margin: auto;
    }

    #container{
        background-color: #000;
        width: 700px;
        height: 900px;
        padding: 20px;
        margin-top: 20px;
        margin-left: 480px;
        }

  #mainbox1{
      width: 675px;
      height: 100px;
      background-color: #ffffff;
      padding: 20px;
      margin-top: -8px;
      margin-left: -8px;

  }  

  #iconone{
      width: 130px;
      height: 130px;
      background-color: #D4A190;
      margin-top: -15px;
      margin-left: -15px;

  }

    #minidescription{
        width: 450px;
        height: 120px;
        background-color: #D4A190;
        margin-top: -130px;
      margin-left: 120px;
      padding: 5px;
      text-align: center;
      font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-variant: normal;
     line-height: 20px;
     word-spacing: 2px;

    }

    #linkguide{
        width: 105px;
        height: 130px;
        background-color: #C390D4;
    margin-top: -130px;
      margin-left: 585px;

    }

    #navigation {
  width: 105px;  
  line-height: 14px;
}

#navigation a:link, #navigation a:visited, #navigation a:active {
  display: block;
  font: 7px  "small fonts", "century gothic";
  text-transform: uppercase; 
  text-decoration: none; 
  letter-spacing: 2px; 
  background-color: #111;
  color: #fff; 
  padding: 7px 3px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#navigation a:hover {
  background-color: #8CC21F;
  color: #000;
  padding: 7px 9px;
}

.question{
     width: 705px;
      height: 50px;
      background-color: #A1D490;
          margin-left: -8px;
          margin-top: 10px;
          padding: 5px;
}

.questionicon{
     background-image: url("http://i66.tinypic.com/2u5qhe8.png");
     width: 16px;
     height: 16px;
     position: absolute;
     top: 200px;
     left: 510px;
    }

    .answer{
        background-color: #90C3D4;
         width: 705px;
      height: 50px;
      margin-left: -8px;
          margin-top: 10px;
          padding: 5px;
    }

    .answericon{
     background-image: url("http://i65.tinypic.com/qod4kx.png");
     width: 16px;
     height: 16px;
     position: absolute;
     top: 260px;
     left: 510px;
    }

    p.center {
  text-align: center;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-variant: normal;
     word-spacing: 2px;

}
```

```html
<head>
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>

  <div id="container">

      <div id="mainbox1">

          <div id="iconone"><IMG SRC="http://i67.tinypic.com/vhxls9.png" ALT="icon"></div>

          <div id="minidescription">ellentesque non semper leo. Aliquam eu ultricies tellus. Ut rutrum fringilla rhoncus. Vestibulum bibendum quam at orci bibendum placerat. Etiam lectus nisl, ullamcorper ac aliquam vitae, efficitur eu mauris. Suspendisse porttitor euismod tempus. Quisque eleifend nulla vel auctor dictum. Ut posuere condimentum odio. Aliquam erat volutpat. Sed in laoreet odio. Mauris quis feugiat dolor.</div>

          <div id="linkguide">
    <div id="navigation">
    <a href="http://google.com">Link 1</a><br>
    <a href="http://yahoo.com">Link 2</a><br>
    <a href="http://bing.com">Link 3</a><br>
    <a href="http://bing.com">Link 4</a><br>

</div>

          </div>
      </div>

      <!-- Question One -->

      <div class="question"><div class="questionicon"></div>
      <p class="center">This paragraph will be red and center-aligned.</p>
          </div>

      <div class="answer"><div class="answericon"</div></div>
       <p class="center">This paragraph will be red and center-aligned.</p>    
       </div>

<!-- Question two -->

       <div class="question"><div class="questionicon"></div>
      <p class="center">This paragraph will be red and center-aligned.</p>
          </div>

      <div class="answer"><div class="answericon"</div></div>
       <p class="center">This paragraph will be red and center-aligned.</p>    
       </div>

  </div>  

</body>
```

You can find the full/original view [here](http://serenity-adams.tumblr.com/myfaq)