Significant difference within design view Dreamweaver CC

Question

Hi all
I am making a site in Dreamweaver CC and if honest, I have just noticed something that has stopped me in my tracks that I am hoping is a common occurrence. The site in question is using Dreamweaver's media queries and I have not touched the boilerplate.
Design view pre CSS styling;
Live view seems to ignore this arrangement and puts everything on the page to 100%
The HTML for this section is;
<!--START mortgage_choices section -------------------------------------->
<div class="light_grey_backround">
  <div class="gridContainer clearfix">
    <div class="fluid mortgage_choices_title">
      <h1 class="dk_blue_text">Which type of new mortgage are you most interested in?</h1>
    </div>
    <div class="fluid mortgage_choices_subtitle">
      <h2 class="dk_grey_text">Simply pick the category that you fall into for more information on how we can help you with your mortgage. </h2>
    </div>
    <div class="fluid mortgage_choices_box zeroMargin_tablet zeroMargin_desktop">
    <figure class="fluid mortgage_choices_image">
        <img src="_images/newhomesmortgages_htb.jpg" alt="Help to Buy Mortgages"/>
        </figure>
    <div class="fluid mortgage_choices_title">
        <h3>HELP TO BUY MORTGAGES</h3>
        </div>
    <div class="fluid mortgage_choices_copy">
        We specialise in the Governament backed Help to Buy mortgage scheme and the fantastic mortgage schemes available with it. Enjoy the huge
        </div>
        <div class="fluid mortgage_choices_action">
        TELL ME MORE...
        </div>
    </div><div class="fluid mortgage_choices_box">
    <figure class="fluid mortgage_choices_image">
        <img src="_images/newhomesmortgages_mortgage_ftb.jpg" alt="First Time Buyer Mortgages"/>
        </figure>
    <div class="fluid mortgage_choices_title">
        <h3>HELP TO BUY MORTGAGES</h3>
        </div>
    <div class="fluid mortgage_choices_copy">
        We specialise in the Governament backed Help to Buy mortgage scheme and the fantastic mortgage schemes available with it. Enjoy the huge
        </div>
        <div class="fluid mortgage_choices_action">
        TELL ME MORE...
        </div>
    </div><div class="fluid mortgage_choices_box zeroMargin_tablet">
    <figure class="fluid mortgage_choices_image">
        <img src="_images/newhomesmortgages_mortgage_ntb.jpg" alt="Next Time Buyer Mortgages"/> </figure>
    <div class="fluid mortgage_choices_title">
        <h3>HELP TO BUY MORTGAGES </h3>
    </div>
    <div class="fluid mortgage_choices_copy">
        We specialise in the Governament backed Help to Buy mortgage scheme and the fantastic mortgage schemes available with it. Enjoy the huge
        </div>
        <div class="fluid mortgage_choices_action">
        TELL ME MORE...
        </div>
    </div>
    <div class="fluid mortgage_choices_box">
    <figure class="fluid mortgage_choices_image">
        <img src="_images/newhomesmortgages_mortgage_b2l.jpg" alt="Buy to Let Mortgages"/> </figure>
    <div class="fluid mortgage_choices_title">
        <h3>HELP TO BUY MORTGAGES</h3>
        </div>
    <div class="fluid mortgage_choices_copy">
        We specialise in the Governament backed Help to Buy mortgage scheme and the fantastic mortgage schemes available with it. Enjoy the huge
        </div>
        <div class="fluid mortgage_choices_action">
        TELL ME MORE...
        </div>
    </div>
  </div>
</div>
<!--END mortgage_choices section ---------------------------------------->
The CSS
@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
  width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
  width:100%;
  Dreamweaver Fluid Grid Properties
  dw-num-cols-mobile: 4;
  dw-num-cols-tablet: 8;
  dw-num-cols-desktop: 12;
  dw-gutter-percentage: 25;
  Inspiration from "Responsive Web Design" by Ethan Marcotte
  http://www.alistapart.com/articles/responsive-web-design
  and Golden Grid System by Joni Korpi
  http://goldengridsystem.com/
.fluid {
  clear: both;
  margin-left: 0;
  width: 100%;
  float: left;
  display: block;
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;       
/* Mobile Layout: 480px and below. */
.gridContainer {
  margin-left: auto;
  margin-right: auto;
  width: 85.5%;
  padding-left: 2.25%;
  padding-right: 2.25%;
  clear: none;
  float: none;
#div1 {
.title_index {
.subtitle_index {
.content_introduction {
.content_introduction_para_2 {
.mortgage_choices_title {
width: 100%;
margin-left: 0;
.mortgage_choices_subtitle {
.mortgage_choices_box {
  background-color: #FFFFFF;
  margin-bottom: 40px;
  border-radius: 7px;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-box-shadow: 1px 1px 1px 1px #797979;
  box-shadow: 1px 1px 1px 1px #797979;
  width: 100%;
  clear: both;
  margin-left: 0;
.mortgage_choices_image {
width: 100%;
margin-left: 0;
.mortgage_choices_copy {
width: 100%;
margin-left: 0;
.mortgage_choices_action {
width: 100%;
margin-left: 0;
.rate_slider {
.rate_slider_header_title {
.rate_slider_subtitle {
.ratetitle {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 30px;
  color: #0F232A;
  margin-top: 35px;
  font-weight: 300;
  width: 90%;
  margin-left: 5%;
  line-height: 35px;
  margin-bottom: 10px;
  text-align: center;
.rate {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 30px;
  color: #3FB0B9;
  font-weight: 600;
  width: 90%;
  margin-bottom: -10px;
  text-align: center;
  margin-left: 5%;
.dealterm {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 22px;
  color: #666666;
  margin-bottom: 10px;
  width: 90%;
  margin-left: 5%;
  line-height: 23px;
  text-align: center;
.ltv {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  color: #666666;
  margin-bottom: 10px;
  width: 90%;
  margin-left: 5%;
  text-align: center;
.costs {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 17px;
  color: #ccc;
  font-weight: 300;
  width: 49.1525%;
  width: 90%;
  margin-left: 5%;
  margin-bottom: 10px;
  text-align: center;
.erc {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 17px;
  color: #ccc;
  font-weight: 300;
  width: 66.1016%;
  width: 90%;
  margin-left: 5%;
  line-height: 20px;
  margin-bottom: 10px;
  text-align: center;
.revert {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 17px;
  color: #ccc;
  font-weight: 300;
  width: 90%;
  margin-left: 5%;
  line-height: 20px;
  text-align: center;
  margin-bottom: 30px;
.protection_choices_title {
  color: #3FB0B9;
  width: 100%;
  margin-left: 0;
.protection_choices_subtitle {
.protection_choices_box {
  background-color:#0F232A;
  margin-bottom: 40px;
  width: 100%;
  clear: both;
  margin-left: 0;
.protection_choices_image {
width: 100%;
margin-left: 0;
.protection_choices_copy {
  color: #FFFFFF;
  overflow-y: hidden;
  overflow-x: hidden;
  border-radius: 7px;
  -webkit-box-shadow: 1px 1px 1px 1px #666666;
  box-shadow: 1px 1px 1px 1px #666666;
  width: 100%;
  margin-left: 0;
.protection_choices_action {
  color: #3FB0B9;
  width: 100%;
  margin-left: 0;
.protection_question {
.protection_subquestion {
  margin-bottom:40px;
.contact_us_number {
.contact_us_email {
.contact_us_form {
.whole_of_market_title {
.whole_of_market_subtitle {
.whole_of_market_lenders {
.downloads_library_title {
.downloads_library_subtitle {
.download_cover {
.zeroMargin_mobile {
margin-left: 0;
.download_cover_container {
.download_cover_graphic {
width: 100%;
clear: both;
margin-left: 0;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
  width: 87.75%;
  padding-left: 1.125%;
  padding-right: 1.125%;
  clear: none;
  float: none;
  margin-left: auto;
#div1 {
.title_index {
.subtitle_index {
.content_introduction {
.content_introduction_para_2 {
.mortgage_choices_title {
width: 100%;
margin-left: 0;
.mortgage_choices_subtitle {
.mortgage_choices_box {
width: 48.7179%;
margin-left: 2.5641%;
clear: none;
.mortgage_choices_image {
width: 48.7179%;
margin-left: 0;
.mortgage_choices_copy {
width: 100%;
margin-left: 0;
.mortgage_choices_action {
width: 100%;
margin-left: 0;
.rate_slider {
.rate_slider_header_title {
.rate_slider_subtitle {
.ratetitle {
.rate {
.dealterm {
.ltv {
.costs {
.erc {
.revert {
.protection_choices_title {
width: 100%;
margin-left: 0;
.protection_choices_subtitle {
.protection_choices_box {
width: 48.7179%;
margin-left: 2.5641%;
clear: none;
.protection_choices_image {
width: 100%;
margin-left: 0;
.protection_choices_copy {
width: 100%;
margin-left: 0;
.protection_choices_action {
width: 100%;
margin-left: 0;
.protection_question {
.protection_subquestion {
.contact_us_number {
.contact_us_email {
.contact_us_form {
display: block;
.whole_of_market_title {
.whole_of_market_subtitle {
.whole_of_market_lenders {
.downloads_library_title {
display: block;
.downloads_library_subtitle {
display: block;
.download_cover_container {
.download_cover_graphic {
width: 100%;
clear: both;
margin-left: 0;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
  width: 78.6666%;
  max-width: 1232px;
  padding-left: 0.6666%;
  padding-right: 0.6666%;
  margin: auto;
  clear: none;
  float: none;
  margin-left: auto;
#div1 {
.title_index {
.subtitle_index {
.content_introduction {
.content_introduction_para_2 {
.mortgage_choices_title {
width: 100%;
margin-left: 0;
.mortgage_choices_subtitle {
.mortgage_choices_box {
width: 23.7288%;
clear: none;
margin-left: 1.6949%;
.mortgage_choices_image {
width: 100%;
margin-left: 0;
.mortgage_choices_copy {
width: 100%;
margin-left: 0;
.mortgage_choices_action {
width: 100%;
margin-left: 0;
.rate_slider {
.rate_slider_header_title {
.rate_slider_subtitle {
.ratetitle {
.rate {
.dealterm {
.ltv {
.costs {
.erc {
.revert {
.protection_choices_title {
width: 100%;
margin-left: 0;
.protection_choices_subtitle {
.protection_choices_box {
width: 23.7288%;
clear: none;
margin-left: 1.6949%;
.protection_choices_image {
width: 100%;
margin-left: 0;
.protection_choices_copy {
width: 100%;
margin-left: 0;
.protection_choices_action {
width: 100%;
margin-left: 0;
.protection_question {
.protection_subquestion {
.contact_us_number {
.contact_us_email {
.contact_us_form {
display: block;
.whole_of_market_title {
.whole_of_market_subtitle {
.whole_of_market_lenders {
.downloads_library_title {
display: block;
.downloads_library_subtitle {
display: block;
.download_cover_container {
.download_cover_graphic {
width: 15.2542%;
margin-left: 1.6949%;
clear: none;
.zeroMargin_desktop {
  margin-left: 0;
.hide_desktop {
display: none;
Any help is appreciated as I am happy with what I have in design view, but it's live view that I am publishing...
Thanks in advance

Answer 1

Thank you for looking, I have resolved this issue. I was to do with the image %'s. When I changed this, it all fell into place.