2 different breaking points for one div doesn't work..?

Question

I am trying to set 2 different width to #home-content-wrap. What I eventually want is to be able to set to home-content-wrap div 80% width if the screen size is smaller than 768px! It is like:

1156 width:80% <1156 width:100% <768 width: 80%

Couple of notes: But <768 width:80% doesn't wok! If I remove >1156 condition then <768 works! If you look the code carefully you ll see that <768 condition changes text color but not width...or not bg color too..

Here is my page/div style:

 *{margin:0;padding:0;text-align:center;}
 #wrap{width:100%;height:100%;}
 #home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto;   
 border:1px solid blue;}
 /**Responsive Columns**/

 .home_lay_1_of_2 {
width: 49.5%;  
margin-left:0.50%; background:lightblue;
 }
 .home_lay_1_of_3 {
width: 49.5%;  background:grey;
 }

here is breaking points:

 /****breakpoint 1**/
 @media only screen and (max-width: 768px) {
 #home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto; color: 
 yellow; border:1px solid yellow;}

.home-txt{float:left; width:100%; height:500px;  }

 .home_lay_1_of_2 {
width: 100%;   
margin-left:0; 
 }
.home_lay_1_of_3 {
width: 100%;   
}
}

/***Breakpoint 2***/
@media only screen and (max-width: 1156px) {
#home-content-wrap{width:100%; max-width:1600px; height:auto; margin:50px auto;  
border:1px solid black;}
}

here is my responsive settings:

.section {
clear: both;
padding: 0;
margin: 0;
 }

.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}

.col {
display: block;
float:left;
}

Here is the fiddle http://jsfiddle.net/GQgNx/

What's wrong here?

Answer 1

Change the second breakpoint media query to:

@media only screen and (min-width: 768px) and (max-width: 1156px) {
   #home-content-wrap {
      border: 1px solid black;
      height: auto; 
      margin: 50px auto;
      max-width: 1600px; 
      width: 100%; 
   }
}

Example: http://jsfiddle.net/GQgNx/2/