Margin-left doesn’t change with media query-CodePudding

In the media query I aske to position nav bar at the bottom and remove the margin-lef of the main section. The media query make the job for the nav bar but not for the margin-left. https://codepen.io/ALL9000/pen/yLzQKmv?editors=1000 What’s wrong. ?

@media (max-width: 777px) {
  nav {
    display: block;
    position: static;
    text-align: center;
    width: 100%;
  }
  #main-doc {
    margin-left: 0px;
  }
}

CodePudding user response：

You simply have to put the media-query at the end of the CSS. You default styling for #main-doc comes after the media-query, so overrides it. It should look like this:

#main-doc {
  margin-left: 290px;
}

@media (max-width: 777px) {
  nav {
    position: static;
    width: 100%;
  }
  #main-doc {
    margin-left: 0px;
  }
}

CodePudding user response：

As you define the #main-doc {margin-left: 290px;} after the @media query it overwrites the media. if you open your browser developer console you can see the @media appears in smaller sizes but does not take effects. so you can just move the #main-doc {margin-left: 290px;} before @media or use the !important keyword to tell the browse 'whenever this media appears its more important. It's a best practice not to use !important too much cuz it can overwrite and cuz damage somewhere else.

#main-doc {
  margin-left: 290px;
}
@media (max-width: 777px) {
      nav {
        display: block;
        position: static;
        text-align: center;
        width: 100%;
      }
      #main-doc {
        margin-left: 0px;
      }
    }

@media (max-width: 777px) {
  nav {
    display: block;
    position: static;
    text-align: center;
    width: 100%;
  }
  #main-doc {
    margin-left: 0px !important;
  }
}
 #main-doc {
      margin-left: 290px;
 }