I am using media queries and div will not centre on desktop version

Question

Hi,
I am building a site for the first time using media queries. My problem is that I cannot get the header div (#layoutDiv1) to centre on the desktop version.
I have pasted my code below, am I missing something?
Any help would be great.
Thanks, Alex.
/* Mobile Layout: 480px and below. */
.gridContainer {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  color: #FFF;
  background-color: #000;
#LayoutDiv1 {
  clear: both;
  float: left;
  margin-left: 0;
  width: 90%;
  display: block;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
  width: 100%;
#LayoutDiv1 {
  clear: both;
  float: left;
  margin-left: 0;
  width: 90%;
  display: block;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
/* 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%;
  text-align: left;
#LayoutDiv1 {
  width: 1000px;
  padding: 20px;
  margin-right: auto;
  margin-left: auto;

Answer 1

Because you don't have max-width to constrain the responsive design attributes from the tablet and phone are also then applied to the desktop because they are true.  Have you tried either setting a max-width or setting the clear and float to none in the desktop CSS?