.wrap {
  width: 100%;
}

.container {
  margin: 0 auto;
}

/**
 * Ultra small
 */
@media only screen and (max-width: 319px) {
  body {
    min-width: 320px;
    overflow-x: scroll; 
  }
}

/**
 * Extra small
 */
@media only screen and (min-width: 320px) and (max-width: 359px) {
  .container {
    width: 100%;
    padding: 0 20px;
  }
}

/**
 * Small
 */
@media only screen and (min-width: 360px) {
  .container {
    width: 100%;
    padding: 0 40px;
  }
}

/**
 * Medium
 */
@media only screen and (min-width: 768px) {
  .container {
    width: 768px;
  }
}

/**
 * Large
 */
@media only screen and (min-width: 1280px) {
  .container {
    width: 1170px;
    padding: 0;
  }
}