My fixed-width div needs to be precisely 816px wide.
I want to center it on the page.
Using the Bootstrap 4 Fixed Header/Footer layout with a body height of 100%, I tried using mx-auto for centering, which works well on desktop but causes a horizontal scroll bar on mobile devices.
To reproduce this issue, run the snippet below in full screen and switch to mobile: Pixel 2XL view.
main > .container-fluid {
padding: 60px 15px 0;
}
.footer {
background-color: #f5f5f5;
}
.footer > .container-fluid {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Viewer</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="styles.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
<div class="container-fluid">
<h1 class="mt-5">Page title</h1>
<div class="mx-auto" style="width: 816px; background-color: red;">
<p>Test conent</p>
<p>Test conent</p>
<p>Test conent</p>
<p>Test conent</p>
<p>Test conent</p>
<p>Test conent</p>
<p>Test conent</p>
<p>Test conent</p>
<p>Test conent</p>
<p>Test conent</p>
<p>Test conent</p>
<p>Test conent</p>
</div>
</div>
</main>
<footer class="footer mt-auto py-3">
<div class="container-fluid">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>