Being relatively new to Bootstrap and CSS, I have been rebuilding this site multiple times over the past couple of weeks in an attempt to fix spacing issues. Currently, I am facing a problem where the main section is slightly too wide for mobile screens in the x-dimension and allows scrolling, which is not the desired behavior. Despite trying various configurations, I am unable to identify the source of this right margin. The content fills the screen until scrolling, leaving a noticeable sliver of the background body color visible. Upon debugging, it appears that the margin resides between the body and the main section. Here is what I have tried in my CSS:
html {
overflow-y: scroll;
overflow-x: hidden; // this solves the problem on a small browser window but not on mobile device.
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
main {
margin: 0;
padding: 0;
background-color: #000; // this is what i was referring to that leaves a white margin after scrolling if this color is in the body, the margin is black.
}
main > .container {
padding-top: 54px;
}
In my HTML, I have included:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Along with all other necessary Bootstrap and JavaScript elements.
I am using the Django framework, so the HTML is formatted as Django templates. The base template contains the main section with a navbar:
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<!-- # Navbar stuff-->
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row justify-content-center">
<div class="col col-md-10">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
</div>
</div>
{% block content %}{% endblock content %}
</main>
<!-- scripts-->
</body>
The inner template typically begins like this:
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-8">
Despite troubleshooting, the issue seems isolated within the base template. I am at a loss and considering a complete rebuild, but wanted to reach out here first!