Recently, I decided to challenge myself by learning pure CSS and moving away from relying on Bootstrap for my layouts. The only aspect of Bootstrap I really used was the container class, so I created a basic project to experiment with pure CSS. In this project, I developed my own custom container class:
body {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/* Media Queries */
@media (min-width: 576px) {
.container {
width: 540px;
}
}
@media (min-width: 768px) {
.container {
width: 720px;
}
}
@media (min-width: 992px) {
.container {
width: 960px;
}
}
@media (min-width: 1200px) {
.container {
width: 1140px;
}
}
@media (min-width: 1400px) {
.container {
width: 1320px;
}
}
In my simple HTML document, I have a header saying "Hello World" as the sole content. This is wrapped in a div with the container class, and everything appears to function properly across all screen sizes. However, upon inspecting Chrome dev tools, I noticed that on various phone display models, a strange -30 right margin persists. Despite this issue, all other aspects work as intended. What could be causing this mysterious margin or what might I be overlooking?