Media queries keep overwriting eachother

Question

I have a created two media queries. However when I edit one, the other is over written with the previous media query's properties. I have noticed that the primary html div holds the class of whatever the most recently edited media query is.  Can someone please give me some idea of what is happening?
Here is an example of the html:
<div class="mainGraphic">
<img src="images/home_scholarship.jpg" alt="" class="mainGraphic" /></div>
<div class="mainContent">
<div class="bannerHome"><img src="images/banner_iphone6.png" alt="" class="bannerSmall750" /></div>
<div class="bannerHome"><img src="images/banner_tv.png" alt="" class="bannerSmall750-2" /></div>
<div class="bannerHome"></div>
<div class="bannerHome"><img src="images/banner_internet.png" alt="" class="bannerSmall750-3" /></div>
<div class="bannerHome"><img src="images/banner_tvonmyside.png" alt="" class="bannerSmall750-4" /></div>
  </div>
Here is an example of the CSS:
@media screen and (max-width:750px){
.mainContent {
  padding-top: 5px;
.bannerSmall750 {
  width: 182px;
  margin-left: -15px;
.bannerSmall750-2 {
  width: 172px;
  margin-left: -10px;
.bannerSmall750-3 {
  width: 177px;
  margin-left: -15px;
.bannerSmall750-4 {
  width: 173px;
  margin-left: -15px;
.mainBanner750 {
  width: 750px;
#container {
  width: 750px;
  height: auto;
  margin-top: 1px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  padding-left: 1px;
  background-color: rgba(255,255,255,1.00);
  -webkit-box-shadow: 0px 0px 18px hsla(0,0%,14%,1.00);
  box-shadow: 0px 0px 18px hsla(0,0%,14%,1.00);
.mainGraphic {
  width: 750px;
  height:
@media only screen and (max-width:480px){
.mainContent {
  padding-top: 5px;
.mainBanner480 {
  width: 380px;
  height:170px;
#container {
  width: 480px;
  height: 780px;
  margin-top: 1px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  padding-left: 1px;
  background-color: rgba(255,255,255,1.00);
  -webkit-box-shadow: 0px 0px 18px hsla(0,0%,14%,1.00);
  box-shadow: 0px 0px 18px hsla(0,0%,14%,1.00);
.headerLogo {
  margin-bottom: 10px;
  margin-top: -16px;
  padding-left: 113px;
  padding-top: px;
  padding-bottom: 15px;
.headerLinks a {
  text-decoration: none;
  color: rgba(208,208,208,1.00);
  padding-left: 0px;
  font-size: 14px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  padding-right: 34px;
  right: -69px;
  bottom: -92px;
  position: relative;
  margin-right: 7px;
  margin-left: -42px;
.mainGraphic {
  width: 480px;
  height:
.mainContent .bannerHome img1 {
.mainContent .bannerHome img2 {
  width: 200px;
  margin-left: 50px;
.mainContent .bannerHome img3 {
    width: 200px;
  margin-left: 20px;
.mainContent .bannerHome img4 {
width: 200px;
  height:286px;
  margin-left: 40px;
.smallBanner480-1 {
  width: 200px;
  height:296px;
  margin-left: 30px;

Answer 1

Wow, had I known I wouldn’t have updated either. I always thought updates were good.
Okay, so I already have my overall html codes and divs completed.
So I go to the CSS Designer panel, select my primary css file under ‘Sources’. 
I select the ‘@Media panel and select the ‘plus’ sign to add new media queries. I define my media queries of screen and (max-width:768px) and screen and(max-width:480px).
Once that’s done and they show up under the  ‘@Media’ panel, I go back to select my primary css file under the ‘Sources’ panel. Select ‘global’ under the ‘@Media’ panel and choose the selector I want to target.
I select .mainGraphic and right click to select ‘Duplicate into media query’ then choose my first target of ‘screen and  (max-width:768px)
Once I see that selector in my ‘screen and (max-width:768px) query I begin to apply different properties to it to make it adjust as desired.
I follow the same procedure with duplicating into the ‘screen and (max-width:480px)’ query and adjusting to properties as desired.
This is when I notice from switching back to my first designed query that the changes made in the 480px are now on the 768px query and vice versa.