title: HTML not responsive to larger screen resolutions
body: <p>I'm working on a site for a client, and something really odd is happening. You can find the current site here <a href="http://107.170.219.136" rel="nofollow noreferrer">http://107.170.219.136</a></p>
  
  <p>The site looks and works find on my screen resolution (1920x1080), but it appears that for larger resolutions the banner and banner text doesn't respond to the screen size. When I tested the site on a screen resolution of 2560x1440 it appears like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/1Y4wm.jpg" rel="nofollow noreferrer">2560x1440</a></p>
  
  <p>Although, a tester is reporting the same issue with the same screen resolution as I. I've been searching for possible solutions like adding a media break point to my CSS and setting the banner to <code>max-wdith: 100%;</code> but nothing. Here's the banner HTML piece of the site:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="banner"&gt;
      &lt;img src="assets/sd-home.jpeg"&gt;
      &lt;div id="bannerText"&gt;
          &lt;h1&gt;San Diego’s First Choice for Bankruptcy Relief&lt;/h1&gt;
      &lt;div class="banner_sep"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>and the full CSS</p>
  
  <pre><code>body{
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      font-family: 'Open Sans', sans-serif;
      background: #fff;
  }
  ::-webkit-input-placeholder {
      color: #a4a4a4;
  }
  
  :-moz-placeholder { /* Firefox 18- */
      color: #a4a4a4;  
  }
  
  ::-moz-placeholder {  /* Firefox 19+ */
      color: #a4a4a4;  
  }
  
  :-ms-input-placeholder {  
      color: #a4a4a4;  
  }
  img{
      max-width: 100%;
      padding: 0;
      margin: 0;
  }
  a{
      text-decoration: none;
  }
  .clearfix{
      clear: both;
  }
  .wraper{
      padding: 0;
      margin: 0;
      max-width: 100%;
  }
  .maincontainer{
      max-width: 1000px;
      margin: 0 auto;
      padding: 0;
  }
  .topbar_bg{
      padding: 12px 0;
      margin: 0;
      width: 100%;
      background: #fff;
      box-shadow: 0 0 5px #000;
  }
  .topbar{
      padding: 0;
      margin: 0;
  }
  .logo{
      font-size: 24px;
      color: #3b97d3;
      padding: 15px 0 0 0;
      font-weight: 700;
      margin: 0;
      float: left;
      max-width: 26%;
      width: 100%;
      text-transform: uppercase;
  }
  .logo span{
      color: #3a3a3a;
  }
  .logo span.lg_fl{
      font-weight: 400;
      text-transform: none;
  }
  .logo span.lg_cm{
      font-size: 16px;
      text-transform: none;
      font-weight: 400;
  }
  .topbar_rght{
      max-width: 542px;
      padding: 0;
      margin: 0;
      float: right;
      width: 100%;
  }
  .location{
      float: left;
      padding: 0;
      margin: 0;
      max-width: 46%;
      width: 100%;
  }
  .location a{
      padding: 0;
      margin: 0;
      text-decoration: none;
  }
  .location a .icon_location{
      max-width: 48px;
      float: left;
      width: 100%;
      padding: 0;
      margin: 0 20px 0 0;
  }
  .location a p{
      padding: 0;
      margin: 0;
      font-size: 16px;
      color: #3a3a3a;
      font-weight: 400;
      line-height: 18px;
  }
  .phone{
      padding: 0;
      margin: 0;
      max-width: 47%;
      float: right;
      width: 100%;
  }
  .phone a{
      padding: 0;
      margin: 0;
      text-decoration: none;
  }
  .phone a .icon_phone{
      padding: 0;
      margin: 0 15px 0 0;
      float: left;
      max-width: 32px;
      width: 100%;
  }
  .phone a p{
      padding: 0;
      margin: 0;
      font-size: 20px;
      color: #3a3a3a;
      font-weight: 400;
      line-height: 20px;
  }
  .phone a h4{
      padding: 0;
      margin: 0;
      font-size: 24px;
      color: #3b97d3;
      font-weight: 700;
      line-height: 30px;
  }
  .video{
      padding: 150px 0;
      margin: 0;
      width: 100%;
      position: relative;
      border-bottom: 10px solid #eaeaea;
  }
  
  #banner{
      position: relative;
      max-width: 100%
  }
  
  
  
  #bannerText {
      position: absolute;
      top: 20px;
      left: 10px;
      font-weight: 700;
      color: #fff;
      font-size: 4vw;
      text-transform: uppercase;
      text-align: center;
  
  }
  
  .banner_sep{
      padding: 0;
      margin: 0 auto;
      max-width: 500px;
      width: 100%;
      background: rgba(255,255,255, 0.5);
      height: 1px;
      margin-top: 40px;
      margin-bottom: 40px;
  }
  .section2{
      padding: 60px 0;
      margin: 0;
      background: url(../images/texture.jpg) repeat;
      width: 100%;
      border-bottom: 10px solid #eaeaea;
  }
  .section2_content{
      padding: 0;
      margin: 0;
      width: 100%;
  }
  .section2_lft{
      max-width: 480px;
      padding: 0;
      margin: 0;
      float: left;
      width: 100%;
  }
  .section2_rght{
      padding: 0;
      margin: 0;
      max-width: 490px;
      width: 100%;
      float: right;
  }
  .section2_heading{
      padding: 0;
      /*margin: 22px 0 10px 40px;*/
      margin: 22px auto 10px auto;
      /*max-width: 245px;*/
      width: 100%;
  }
  .section2_head_lft{
      float: left;
      height: 1px;
      background: #3b97d3;
      max-width: 220px;
      width: 100%;
  }
  .section2_head_mdle{
      float: left;
      max-width: 23px;
      width: 100%;
      padding: 0;
      margin: -22px 0 0 12px;
  }
  .section2_head_rght{
      float: right;
      height: 1px;
      background: #3b97d3;
      max-width: 220px;
      width: 100%;
  }
  .section2_lft p{
      font-size: 16px;
      padding: 25px 0 0 0;
      margin: 0;
      line-height: 24px;
      font-weight: 400;
      color: #595959;
  }
  .section2_lft h3{
      font-size: 20px;
      padding: 20px 0 0 0;
      margin: 0;
      line-height: 26px;
      font-weight: 500;
      color: #595959;
  }
  .section2_lft h2{
      font-size: 36px;
      padding: 0;
      margin: 0;
      line-height: 1;
      font-weight: 700;
      color: #3a3a3a;
  }
  .form_bg{
      padding: 20px 20px 10px 20px;
      margin: 0;
      background: #f8f8f8;
      border: 5px solid #e0e0e0;
      border-radius: 10px;
      max-width: 450px;
      width: 100%;
  }
  .form_heading{
      text-align: center;
      padding: 0 0 20px 0;
      margin: 0 auto;
      max-width: 400px;
      width: 100%;
  }
  .form_heading h1{
      font-size: 30px;
      font-weight: 700;
      padding: 3px 0 0 0;
      line-height: 1;
      margin: 0;
      color: #3a3a3a;
      text-align:left;
  }
  .fields{
      padding: 0;
      margin: 0 auto;
      max-width:440px; 
      width: 100%;
  }
  .form-control{
      padding: 0;
      margin: 0 0 15px 0;
      width: 100%;
  }
  .input_field{
      padding: 11px 3%;
      margin: 0;
      max-width: 94%;
      width: 100%;
      border-radius: 10px;
      border: 1px solid #e9e9e9;
      font-size: 14px;
      font-weight: 400;
      color: #a4a4a4;
      font-family: 'Open Sans', sans-serif;
  
  }
  .frm_lft{
      max-width: 48%;
      padding: 0;
      margin: 0 4% 0 0;
      float: left;
      width: 100%;
  }
  .frm_rght{
      max-width: 48%;
      padding: 0;
      margin: 0;
      float: right;
      width: 100%;
  }
  .select_field{
      padding: 12px 3%;
      margin: 0;
      max-width: 100%;
      width: 100%;
      border-radius: 10px;
      border: 1px solid #e9e9e9;
      -webkit-appearance:none;
      -moz-appearance:none;
      appearance:none;
      font-size: 14px;
      font-weight: 400;
      color: #a4a4a4;
      font-family: 'Open Sans', sans-serif;
  
  }
  .textarea{
      padding: 11px 3%;
      margin: 0;
      max-width: 94%;
      width: 100%;
      border-radius: 10px;
      border: 1px solid #e9e9e9;
      font-size: 14px;
      font-weight: 400;
      color: #a4a4a4;
      min-height: 80px;
      height: auto;
      font-family: 'Open Sans', sans-serif;
  }
  .btn_sbmit{
      padding: 28px 0;
      text-align: center;
      background: #3b97d3;
      border-radius: 6px;
      margin: 0 auto;
      font-size: 30px;
      color: #fff;
      font-weight: 700;
      width: 100%;
      border: none;
      cursor: pointer;
      box-shadow: 0 5px 0 #245977;
  }
  .btn_sbmit:hover{
      background: #318ac5;
  }
  .frm_lines{
      position: relative;
      top: -5px;
  }
  .help_bg{
      padding: 60px 0;
      margin: 0;
      width: 100%;
  }
  .help_content{
      padding: 0;
      margin: 0;
      width: 100%;
  }
  .help_heading{
      max-width: 560px;
      margin: 0 auto;
      padding: 0;
      width: 100%;
      text-align: center;
      line-height: 1;
      font-weight: 700;
      color: #3a3a3a;
      font-size: 48px;
  }
  .heading_icon{
      padding: 0 0 5px 0;
      margin: 0 auto;
      max-width: 245px;
      width: 100%;
  }
  .help_head_lft{
      float: left;
      height: 1px;
      background: #3b97d3;
      max-width: 100px;
      width: 100%;
  }
  .help_head_mdle{
      float: left;
      max-width: 23px;
      width: 100%;
      padding: 0;
      margin: -36px 0 0 12px;
  }
  .help_head_rght{
      float: right;
      height: 1px;
      background: #3b97d3;
      max-width: 100px;
      width: 100%;
  }
  .chapters{
      padding: 0;
      margin: 100px 0 0 0;
      width: 100%;
  }
  .chapter_colm{
      padding: 0 19px 20px 19px;
      margin: 0 2% 0 0;
      max-width: 280px;
      width: 100%;
      float: left;
      text-align: left;
      border: 1px solid #dedede;
      border-radius: 10px;
      min-height: 490px;
  }
  .chapter_colm:hover{
      box-shadow: 0 0 10px #cecece;
  }
  .chapter_icon{
      padding: 12px 0;
      margin: 0 auto;
      max-width: 120px;
      border: 2px solid #3b97d3;
      border-radius: 12px;
      text-align: center;
      background: #fff;
      margin-top: -50px;
  }
  .chapter_colm h3{
      padding: 25px 0 0 0;
      margin: 0;
      font-size: 30px;
      color: #3a3a3a;
      text-align:center;
  }
  .chapter_colm h2{
      padding: 25px 0 0 0;
      margin: 0;
      font-size: 28px;
      color: #3a3a3a;
      font-weight: 500;
  }
  .chapter_colm p{
      padding: 15px 0 0 0;
      margin: 0;
      font-size: 14px;
      color: #595959;
      font-weight: 400;
      line-height: 22px;
  }
  .chapter_line{
      max-width: 60px;
      width: 100%;
      padding: 0;
      margin: 0 auto;
      height: 4px;
      background: #3b97d3;
      margin-top: 15px;
  }
  @media screen and (min-width:850px) {
  .chapter_colm_mrg, .chapter_colm:nth-child(3n+3){
      margin-right: 0;
  }
  .chapter_colm:nth-child(3n+4){
      clear:both;
  }
  }
  .help_option{
      padding: 40px 0;
      margin: 0;
      width: 100%;
  }
  .help_colm{
      padding: 0;
      margin: 0 2% 0 0;
      max-width: 32%;
      width: 100%;
      float: left;
  }
  @media screen and (min-width:850px) {
  .help_colm_mrg, .help_colm:nth-child(3n+3){
      margin-right: 0;
  }
  
  /* Desktops and laptops ----------- */
  @media only screen  and (min-width : 1224px) {
  /* Styles */
  }
  
  /* Large screens ----------- */
  @media only screen  and (min-width : 1824px) {
  /* Styles */
  }
  .help_colm:nth-child(3n+4){
      clear:both;
  }
  }
  .help_colm_lft{
      padding: 0;
      float: left;
      margin: 0;
      max-width: 24%;
      width: 100%;
      font-size: 60px;
      font-weight: 300;
      color: #3b97d3;
  }
  .help_colm_rght{
      float: right;
      padding: 0;
      margin: 0;
      /*max-width: 100%;*/
      width: 100%;
  }
  .help_colm_rght h4{
      color: #3b97d3;
      padding: 0 0 5px 0;
      margin: 0;
      font-size: 20px;
      font-weight: 500;
  }
  .help_colm_rght h3{
      color: #3a3a3a;
      padding: 10px 0;
      margin: 0;
      font-size: 18px;
      font-weight: 500;
  }
  .help_colm_rght p{
      color: #767676;
      padding: 0;
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
  }
  .grey_bg{
      padding: 50px 0;
      margin: 0;
      background: #3a3a3a;
      width: 100%;
  }
  .btns{
      padding: 0;
      margin: 0;
      width: 100%;
  }
  .btn_green{
      max-width: 470px;
      padding: 0;
      margin: 0;
      float: left;
      width: 100%;
  }
  .btn_green a{
      font-size: 26px;
      color: #fff;
      font-weight: 400;
      padding: 12px 0;
      margin: 0;
      background: #72b12f;
      text-align: center;
      border-radius: 6px;
      width: 100%;
      display: block;
      box-shadow: 0 5px 0 #507f19;
  }
  .btn_green a span{
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
  }
  .btn_green a:hover{
      background: #68a527;
  }
  .btn_blue{
      max-width: 470px;
      padding: 0;
      margin: 0;
      float: right;
      width: 100%;
  }
  .btn_blue a{
      font-size: 40px;
      color: #fff;
      font-weight: 700;
      padding: 25px 0;
      margin: 0;
      background: #3b97d3;
      text-align: center;
      border-radius: 6px;
      width: 100%;
      display: block;
      box-shadow: 0 5px 0 #245977;
  }
  .btn_blue a:hover{
      background: #358ec8;
  }
  .footer_bg{
      padding: 30px 0;
      margin: 0;
      width: 100%;
      background: #fff;
  }
  .footer{
      padding: 0;
      margin: 50px 0 0 0;
  }
  .footer_lft{
      padding: 0;
      margin: 0;
      float: left;
      /*max-width: 33%;
      width: 100%;*/
  }
  .footer_lft ul{
      padding: 0;
      margin: 0;
  }
  .footer_lft ul li{
      padding: 0 8px;
      margin: 0;
      list-style: none;
      display: inline;
      border-right: 1px solid #fff;
  }
  .footer_lft ul li:last-child{
      border-right: none;
  }
  .footer_lft ul li a{
      font-size: 14px;
      color: #fff;
      padding: 0;
      margin: 0;
      font-weight: 400;
      text-decoration: none;
  }
  .footer_lft ul li a:hover{
      color: #b5afaf;
  }
  .footer_rght{
      float: right;
      padding: 0;
      margin: 0;
      font-size: 14px;
      color: #fff;
      font-weight: 400;
  }
  .error{
      text-align: left!important;
      width: 100%;
      max-width: none;
  }
  .thankyou {
      padding: 35px 20px 50px 20px;
      margin: 0;
      background: #f8f8f8;
      border: 5px solid #e0e0e0;
      border-radius: 10px;
      max-width: 450px;
      width: 100%;
  }
  .thankyou_heading{
      margin: 0 auto;
      text-align: center;
      padding: 0;
      width: 100%;
  }
  .thankyou_heading h1{
      font-size: 48px;
      padding: 0;
      margin: 0;
      line-height: 1;
      font-weight: 700;
      color: #3a3a3a;
      text-transform: uppercase;
      text-align: center;
  }
  .thankyou p {
      font-size: 15px;
      padding: 10px 0 0 0;
      margin: 0;
      line-height: 24px;
      font-weight: 400;
      color: #595959;
      text-align: center;
  }
  .thankyou{
      display: none;
  }
  .icon-icon_judge{
      font-size: 78px;
      color: #3a3a3a;
  }
  .icon-icon_lawer{
      font-size: 78px;
      color: #3a3a3a;
  }
  .icon-icon_weight{
      font-size: 78px;
      color: #3a3a3a;
  }
  .btn_green2{
      max-width: 470px;
      padding: 0;
      margin: 52px 0 0 0;
      float: left;
      width: 100%;
  }
  .btn_green2 a{
      font-size: 26px;
      color: #fff;
      font-weight: 400;
      padding: 11px 0;
      margin: 0;
      background: #72b12f;
      text-align: center;
      border-radius: 6px;
      width: 100%;
      display: block;
      box-shadow: 0 5px 0 #507f19;
  }
  .btn_green2 a span{
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
  }
  .btn_green2 a:hover{
      background: #68a527;
  }
  </code></pre>
  
  <p>I'm fairly new to responsive design so any advice is much appreciated. I just want the site to appear the same way it appears for me, and hopefully for you as well. </p>