How to get rid of a CSS style instance that is effecting the wrong page

Question

I am new to CSS and I am working in Dreamweaver CC.  I am mostly designing in the large screen view and then making my changes to the tablet and phone later.
I have the large screen design finished, and now am making changes to the tablet size. I am working on the footer (for example) and when I change the margins and sizes of the elements in the footer, it is changing the large screen version as well.  It is almost like the CSS instance for the footer is overriding my Global CSS for the footer on the large screen version.
This is so confusing to me, I thought I could make changes in the tablet version and it wouldn't effect the other screens.
What do I do to get the tablet CSS to stop effecting my large screen?
thank  you

Answer 1

@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 {
  max-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: 5;
  dw-num-cols-tablet: 9;
  dw-num-cols-desktop: 13;
  dw-gutter-percentage: 20;
  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;
  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: 100%;
  padding-left: 0;
  padding-right: 0;
  clear: none;
  float: none;
#top {
.tagline {
  width: 100%;
  clear: both;
  margin-left: 0;
  /* [disabled]margin-top: 50px; */
  /* [disabled]top: 50px; */
  position: static;
  display: block;
  float: left;
  text-align: left;
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
  font-style: italic;
#mainNav {
  background-color: #30434D;
  width: 100%;
  background-repeat: repeat-x;
  float: none;
  clear: both;
  height: 35px;
#navMenu {
  clear: none;
  margin-left: 0;
  position: static;
#menuChoices {
clear: both;
margin-left: 0;
width: 100%;
position: static;
height: auto;
#menuChoices a:hover{
  background-color: #3192D8;
  display: block;
#menuChoices a:link{
  color: #FFFFFF;
  text-decoration: none;
.menuItem {
  color: #FFFFFF;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  font-size: small;
  font-weight: lighter;
  padding-top: 0px;
  padding-bottom: 0px;
  width: 100%;
  clear: both;
  margin-left: 0;
  background-size: auto 35px;
  display: block;
#div2 {
  display: block;
#SubHead {
  clear: none;
  float: left;
  position: static;
  height: auto;
  width: 100%;
#mainSubHead {
  text-align: center;
  width: 100%;
  clear: none;
  margin-left: 0;
  position: static;
  height: auto;
#div3 {
width: 100%;
#promoBlocks {
#div4 {
clear: both;
margin-left: 0;
width: 100%;
#PromoBlocks {
  display: block;
  text-align: center;
  background-color: #FFFFFF;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50px;
  position: static;
  height: auto;
  width: 100%;
.PromoItem {
width: 100%;
clear: both;
margin-left: 0;
.PromoButtons {
  color: #FFFFFF;
  font-size: small;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  display: block;
  height: 30px;
  background-color: #3192D8;
  line-height: 30px;
  clear: both;
  margin-left: 0;
  width: 100%;
#mainContent {
  background-color: #30434D;
  color: #FFFFFF;
  width: 100%;
  clear: both;
  float: left;
  position: static;
  height: auto;
  margin-left: 0;
  background-repeat: repeat;
  background-image: url(../grayTexture2.png);
.content {
.contentStyle {
  padding-left: 30px;
  width: 85%;
  padding-right: 20px;
  margin-left: 0;
#mainAside {
  width: 350px;
  float: left;
  clear: right;
  position: static;
  height: auto;
  margin-left: 0;
  padding-left: 25px;
#mainFooter {
  float: left;
  clear: both;
  background-color: #3192D8;
  width: 100%;
  display: block;
#footerLogo {
  width: 250px;
  padding-top: 15px;
  padding-left: 30px;
#footerInfo {
  width: 500px;
  float: left;
  clear: right;
  color: #FFFFFF;
  font-style: normal;
  font-weight: 200;
  font-family: source-sans-pro;
  margin-top: 70px;
  margin-left: 0px;
#asideBrochure {
width: 100%;
margin-left: 0;
clear: both;
#asideVideo {
width: 100%;
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: 100%;
  padding-left: 0%;
  padding-right: 0%;
  clear: none;
  float: none;
  margin-left: auto;
#top {
.tagline {
width: 100%;
clear: both;
margin-left: 0;
#mainNav {
  background-color: #30434D;
  background-repeat: repeat-x;
#navMenu {
clear: both;
margin-left: 0;
position: static;
#menuChoices {
margin-left: 0;
clear: both;
width: 100%;
position: static;
height: auto;
.menuItem {
  width: 13%;
  margin-left: 1.8867%;
  text-align: center;
  float: left;
  clear: none;
  height: 35px;
  vertical-align: middle;
  display: block;
#div2 {
#SubHead {
position: static;
height: auto;
width: 100%;
#mainSubHead {
clear: both;
margin-left: 0;
position: static;
height: auto;
width: 100%;
#div3 {
width: 100%;
#promoBlocks {
#div4 {
clear: both;
margin-left: 0;
width: 100%;
#PromoBlocks {
  float: left;
  display: block;
  text-align: center;
  position: static;
  height: auto;
  width: 100%;
  margin-left: 0;
.PromoItem {
  clear: both;
  display: block;
  text-align: center;
  padding-left: 0px;
  float: left;
  margin-left: 25%;
  width: 400px;
.PromoButtons {
  display: block;
  height: 30px;
  background-color: #3192D8;
  line-height: 30px;
  clear: both;
  margin-left: 0;
  width: 100%;
#mainContent {
  width: 100%;
  clear: both;
  margin-left: 0;
  float: left;
  position: static;
  height: auto;
.content {
.contentStyle {
  width: 88.6792%;
  margin-left: 0;
#mainAside {
width: 100%;
margin-left: 0;
position: static;
height: auto;
#mainFooter {
#footerLogo {
#footerInfo {
  margin-left: 25px;
#asideBrochure {
  width: 32.0754%;
  margin-left: 1.8867%;
  clear: right;
  float: left;
#asideVideo {
width: 43.3962%;
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: 100%;
  max-width: 1920px;
  padding-left: 0;
  padding-right: 0;
  margin: auto;
  clear: none;
  float: none;
  margin-left: auto;
#top {
.tagline {
width: 79.3103%;
margin-left: 1.2987%;
clear: none;
#mainNav {
  background-color: #30434D;
  background-repeat: repeat-x;
#navMenu {
margin-left: 1.2987%;
clear: none;
position: static;
#menuChoices {
  display: block;
  height: auto;
  clear: both;
  margin-left: 0;
  width: 100%;
  position: static;
.menuItem {
  width: 14.2857%;
  margin-left: 1.2987%;
  clear: none;
  height: 30px;
  line-height: 35px;
  text-align: center;
  background-size: auto 35px;
  display: block;
  padding: 0px;
#top img {
  text-align: left;
  background-repeat: no-repeat;
  float: left;
  margin-left: 10px;
#div2 {
#SubHead {
  position: static;
  margin-left: auto;
  height: auto;
  /* [disabled]width: 1000px; */
  top: 586px;
  left: 0px;
#mainSubHead {
  margin-left: 0;
  clear: both;
  position: static;
  height: auto;
  width: 100%;
#div3 {
width: 100%;
#promoBlocks {
#div4 {
margin-left: 1.2987%;
clear: none;
width: 29.8701%;
#PromoBlocks {
margin-left: 0;
position: static;
height: auto;
width: 100%;
.PromoItem {
width: 29.8701%;
margin-left: 1.2987%;
clear: none;
.PromoButtons {
  display: block;
  height: 30px;
  background-color: #3192D8;
  line-height: 30px;
  width: 100%;
  margin-left: 0;
#mainContent {
  clear: both;
  margin-left: 0;
  position: static;
  height: auto;
  width: 100%;
.content {
.contentStyle {
  width: 45%;
  margin-left: 0;
#mainAside {
  width: 37.6623%;
  position: static;
  height: auto;
  margin-left: 0;
#mainFooter {
#footerLogo {
#footerInfo {
  line-height: 30px;
  display: block;
  height: 30px;
  float: none;
  clear: none;
#asideBrochure {
width: 100%;
margin-left: 0;
clear: both;
#asideVideo {
width: 100%;
margin-left: 0;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
.mainSubHead {
  color: #FFFFFF;
  background-color: #F60;
  display: block;
  font-family: questrial;
  font-size: 30px;
  margin: auto;
  height: 40px;
  line-height: 40px;
  font-style: normal;
  font-weight: 400;
.mainSubHead {
  color: #FFFFFF;
  background-color: #F60;
  display: block;
  font-family: questrial;
  font-size: 30px;
  margin: auto;
  height: 80px;
  line-height: 40px;
  font-style: normal;
  font-weight: 400;
.PromoButtons a:link {
  color: #FFFFFF;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  text-decoration: none;
.PromoButtons a:hover {
  color: #FFFFFF;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  text-decoration: none;
  background-color: #30434D;
  display: block;
  background-size: auto 30px;
Yes, I am using one CSS file for all three media queries... Is this wrong?