display background color for the page & align texts at center

Replace this style and check it

  <style type="text/css">
    .career-page-box{
        width: 90%;
        margin: auto;
        background: #fff;
    }
    .career-page-box .page-title {
      margin: 10px 0 0px 0;
      padding: 0;
      clear: both;
    }
    .career-page-box .page-title h1 {
      margin: 0;
      padding: 0 0 8px 0;
      text-align:center;
    }
    .career-page-box .fill-out {
      border-bottom: #ddd solid 1px;
      padding: 0 0 10px 0;
      margin: 0px 0 10px 0;
      text-align: center;
    }
    .career-page-box .form-panel {
      padding: 0;
       text-align:center;
    }
    .career-page-box .form-panel .required {
      margin: 10px 0 8px;
    }
    .career-page-box .form-panel .form-group {
      clear: both;
      width: 49.8%;
      margin:auto;
      text-align:left;
    }
    .career-page-box .form-panel .form-group  label{
      text-align:left !important;
    }
    .career-page-box .form-panel .form-group .form-list li {
      float: left;
      width: 100%;
    }
    .career-page-box .form-panel .form-group .form-list li label {
      line-height: 30px;
      padding-right: 30px;
    }
    .career-page-box .form-panel .form-group .form-list li label em {
      color: #df280a;
      margin: 0 0 0 2px;
      font-style: normal;
    }
    .career-page-box .form-panel .form-group .custom-select {
      float: left;
      width: 100%;
      margin: 0 0px 0 0;
      background-position: 98% 50%;
    }
    .career-page-box .form-panel .form-group .custom-select select {
      margin-top: 0;
    }
    .career-page-box .form-panel .buttons-set {
      clear:both;
      border-top: 0;
    }
    .career-page-box .form-panel .buttons-set button.button {

    }

    .custom-select {
      border: 1px solid #ccc!important;
      width: 120px;
      height: 30px;
      overflow: hidden;
      background: #fff url("../images/custom-select-downarrow.png") no-repeat 95% 50%;
    }
    .arrow-up {
      background: transparent url("../images/arrow-up-white.png") no-repeat scroll 0 0;
      height: 15px;
      width: 25px;
      position: absolute;
      right: 25px;
      top: -15px;
    }
    .custom-select select {
      padding: 5px 8px!important;
      width: 100%;
      border: none;
      box-shadow: none;
      background: transparent;
      background-image: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    input[type=email],
    input[type=search],
    input[type=number],
    input[type=password],
    input[type=tel],
    input[type=text] {
      width: 100%;
      max-width: 100%;
    }
    input[type=email],
    input[type=search],
    input[type=number],
    input[type=password],
    input[type=tel],
    input[type=text] {
      height: 32px;
      padding: 0 8px;
      border: 1px solid #d1d1d1;
      background: #FFFFFF;
      font-size: 13px;
    }
    .careercv
    {
      padding-top: 10px;
    }

    </style>

Replace Code

<div class="career-page-box">
  <div class="page-title career-title">
    <h1><?php echo $this->__('Career') ?></h1>
  </div>
  <?php $careerForm=Mage::getSingleton('core/session')->getFormData();?>
  <form action="<?php echo mage::getUrl('career/index/save'); ?>" id="carrer_form" method="post" name="carrer_form" enctype='multipart/form-data'>
    <div class="fill-out"></div>
    <div class="form-panel">
      <div class="inner-panel">
        <p class="required"><?php echo $this->__('Required Fields') ?><em>*</em></p>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="jobtitle"><?php echo $this->__('How did you hear about us') ?><em>*</em></label>
              <div class="custom-select">
                <select name="jobtitle" id="jobtitle" class="validate-select form-control required-entry">
                  <option value="">Please Select</option>
                  <option value="NewsPaper" <?php if($careerForm['jobtitle']=="NewsPaper"){
              ?>selected="selected"<?php } ?>>NewsPaper</option>
                  <option value="onlinsite" <?php if($careerForm['jobtitle']=="onlinsite"){?>selected="selected"<?php } ?>>Online Website</option>
                  <option value="Friends" <?php if($careerForm['jobtitle']=="Friends"){?>selected="selected"<?php } ?>>Friends</option>
                </select>
              </div>
            </li>
            <li>
              <label for="jobtitle"><?php echo $this->__('Job Type') ?><em>*</em></label>
              <?php  $jobs=Mage::getStoreConfig('career/career/job_list');
           if($jobs!='')
           $jobsselected=explode(",",$jobs);
         else
          $jobsselected='';

           ?>
              <div class="custom-select">
                <select name="job" id="job" class="form-control required-entry">
                  <option value=""> Please Select </option>
                  <?php foreach($jobsselected as $jobs): ?>
                  <option value="<?php echo $jobs ?>"> <?php echo $jobs; ?> </option>
                  <?php endforeach; ?>
                </select>
              </div>
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="firstname"><?php echo $this->__('First Name') ?><em>*</em></label>
              <input name="fname" class="form-control required-entry"  size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['fname'];?>"/>
            </li>
            <li>
              <label for="lastname"><?php echo $this->__('Last Name') ?><em>*</em></label>
              <input name="lname" class="form-control required-entry"  size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['lname'];?>"/>
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="emailaddress"><?php echo $this->__('Email address') ?><em>*</em></label>
              <input name="email_address" placeholder="<?php echo $this->__('') ?>" class="form-control required-entry validate-email" type="text" value="<?php echo $careerForm['email_address'];?>"/>
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="telephonenumber"><?php echo $this->__('Telephone Number') ?><em>*</em></label>
              <input name="phone" class="form-control required-entry validate-number" type="text" value="<?php echo $careerForm['phone'];?>" />
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="cv"><?php echo $this->__('Upload Your Cv') ?><em>*</em></label>
              <input name="cv" class="form-control required-file careercv" type="file" />
            </li>
          </ul>
        </div>
        <div class="buttons-set">
          <button class="button" title="<?php echo $this->__('Submit Your Cv'); ?>" type="submit"><span><span><?php echo $this->__('Submit Cv') ?></span></span></button>
        </div>
      </div>
    </div>
  </form>
  <script type="text/javascript">
//<![CDATA[
   var carrerForm = new VarienForm('carrer_form', true);
//]]>
</script>
</div>

To start with give background color to main container

.main {
    margin: 0 auto;
    width: 1000px;
    background: #fff;
    padding:10px;
}

• Remove the negative margin from breadcrumbs
• For the form give a percentage width and use margin:0px auto
• Add 100% width to input element
• Center heading and do other basic styling

In order to give Page color at particular section you need to apply the .CSS on div or internal div tag.

just say for the following HTML tag.

<div class="career-page-box">
  <div class="page-title career-title">
  </div
</div>

If i want to give background color to the particular section of the page having div tag with class as page-title, so i will write the .css code like this:

.career-page-box .page-title{
background: red;
}

// This code is for coloring a particular section of any HTML page by using div tag.