/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {  
    .container {
        padding: 20px 20px;
    }
}
  
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) and (max-width: 767.98px) {  
    .container {
        padding: 20px 20px;
    }
}
  
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) and (max-width: 991.98px) {  
    .container {
        padding: 30px 40px;
    }
} 
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) and (max-width: 1199.98px) {  
    .container {
        padding: 40px 60px;
    }
  } 
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {  
    .container {
        padding: 50px 80px;
    }
}

  /* Extra large devices (xlarge desktops, 1400px and up) */
  @media (min-width: 1400px) {  
    .container {
        padding: 60px 100px;
    }
}

이런 건 최대한 스타일링하고 싶지 않다.
가급적 기본 UI 를 따르도록 해 보자.

그래도 기본적인 개념에다 꼭 필요한 코드이다.