How can I fix a form's mobile view?

I have a WordPress site: http://www.clevercontracts.co.za/contracts/ with a form on the one page. The problem is in mobile view the form is cut off completely! I think it has something to do with my box (padding).

I tried a few variants, but nothing seems to work. I use the Contact Form 7 wordpress plugin.

Below find the CSS and a picture enter image description here :

/**
 * Footer 4 stylesheet  
 * */
.footer-4 {
  padding-top:20px;
  padding-bottom:20px;
  color:white;
  text-align:center
}
 
.footer-4 .brand {
  font-size:20px;
  font-weight:normal;
  font-weight:500;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#ffffff
}
 
.footer-4 .brand:hover,.footer-4 .brand:focus,.footer-4 .brand.active {
  color:#1abc9c
}
 
.walkeroutside {
  padding:50px 200px 100px;
  background:#E0E0E0
}
 
.walkerbox {
  margin-top:20px;
  padding:26px 24px 46px;
  font-weight:400;
  overflow:hidden;
  background:#FFFFFF;
  -webkit-border-radius:17px;
  -moz-border-radius:17px;
  border-radius:17px;
  border:#7F7F7F solid 1px
}
 
.contactbox {
  width:500px;
  float:left;
  display:inline
}
 
.qbox {
  display:inline;
  width:269px;
  float:right;
  background:#fff;
  -webkit-box-sizing:border-box;
/* Safari/Chrome, other WebKit */
  -moz-box-sizing:border-box;
/* Firefox, other Gecko */
  box-sizing:border-box;
/* Opera/IE 8+ */
  padding:1.618em;
  margin:0 0 1.618em;
  border:1px solid #dcdcdc;
  -webkit-border-radius:.327em;
  border-radius:.327em;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  position:relative;
  box-shadow:0 1px 1px 1px rgba(0,0,0,0.05);
  -webkit-box-shadow:0 1px 1px 1px rgba(0,0,0,0.05);
  -webkit-transition:all ease-in-out .2s;
  -moz-transition:all ease-in-out .2s;
  -ms-transition:all ease-in-out .2s;
  -o-transition:all ease-in-out .2s;
  transition:all ease-in-out .2s
}
 
.how-it-works-section {
  display:inline
}
 
.hiwimage {
  display:inline
}
 
.hiwtext {
  display:inline;
  padding-right:8px;
  padding-left:5px
}
 
.how_it_works_img {
  width:5%;
  height:5%
}
 
.bubble {
  float:right;
  display:inline;
  position:relative;
  width:260px;
  height:170px;
  padding:15px;
  background:#FFFFFF;
  -webkit-border-radius:17px;
  -moz-border-radius:17px;
  border-radius:17px;
  border:#7F7F7F solid 1px
}
 
.bubble:after {
  content:'';
  position:absolute;
  border-style:solid;
  border-width:22px 13px 0;
  border-color:#FFFFFF transparent;
  display:block;
  width:0;
  z-index:1;
  bottom:-22px;
  left:41px
}
 
.bubble:before {
  content:'';
  position:absolute;
  border-style:solid;
  border-width:22px 13px 0;
  border-color:#7F7F7F transparent;
  display:block;
  width:0;
  z-index:0;
  bottom:-23px;
  left:41px
}
 
.quote-author-photo {
  display:inline-block;
  width:65px;
  height:65px;
  background:;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  overflow:hidden;
  margin-right:20px
}

 <div class="walkeroutside">
   <h1>Employment Contract</h1>
   <div class="how-it-works-section">
     <div class="hiwimage">
       <img src="http://www.clevercontracts.co.za/wp-content/uploads/2015/03/Compose.png" alt="" class="how_it_works_img">
     </div>
     <div class="hiwtext">
       Complete the contract form &amp; submit
     </div>
     <div class="hiwimage">
       <img src="http://www.clevercontracts.co.za/wp-content/uploads/2015/03/hand_arrow_black_right.png" alt="" class="how_it_works_img"> <img src="http://www.clevercontracts.co.za/wp-content/uploads/2015/03/Envelope.png" alt="" class="how_it_works_img">
       <div class="hiwtext">
         Make payment
       </div>
       <div class="hiwimage">
         <img src="http://www.clevercontracts.co.za/wp-content/uploads/2015/03/hand_arrow_black_right.png" alt="" class="how_it_works_img"> <img src="http://www.clevercontracts.co.za/wp-content/uploads/2015/03/Contract.png" alt="" class="how_it_works_img">
       </div>
       <div class="hiwtext">
         Print the contract. Sign.
       </div>
       <div class="walkerbox">
         <div class="contactbox">
           [contact-form-7 id="187" title="Contract For A Domestic Worker"]
         </div>
         <div class="bubble">
           <p>Questions? <br>
            <a href="mailto:janie@clevercontracts.co.za?Subject=Hi%20I%20have%20a%20question">Send Janie a Mail</a></p>
           <div class="quote-author-photo">
             <img alt="" src="http://www.clevercontracts.co.za/wp-content/uploads/2015/03/janiewalker.png">
           </div>
         </div>
          <a href="mailto:janie@clevercontracts.co.za?Subject=Hi%20I%20have%20a%20question"></a>
       </div>
        <a href="mailto:janie@clevercontracts.co.za?Subject=Hi%20I%20have%20a%20question"></a>
     </div>
      <a href="mailto:janie@clevercontracts.co.za?Subject=Hi%20I%20have%20a%20question"></a>
   </div>
    <a href="mailto:janie@clevercontracts.co.za?Subject=Hi%20I%20have%20a%20question"></a>
 </div>
 <a href="mailto:janie@clevercontracts.co.za?Subject=Hi%20I%20have%20a%20question"></a>

Solution

make the following css changes

@media (max-width: 992px){
.contactbox {  width: 100%;}
.walkeroutside{padding:50px 15px;}
}