Why is the min width greater than the max width?

Question

I'm trying to learn a little of this to help with my web design skills. It's been a long time since I've built from scratch so I have a learning curve here.

In Dreamweaver, there is pre-fab Bootstrap code in the .css.

I want to know why the min width is greater than the max width.

This is what comes in a new page:

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Thanks in advance.

Clare

Answer 1

The bootstrap grid systems work with theses classes: container and container-fluid that come with a 36px padding as default 15px to the left and 18px to the right. So for the first media query we have 576px - 540px = 36px. The media query width apply for all screen smaller than 576px.

Younshould visit these links for more information.

Bootstrap Grid System

Bootstrap container