I've been struggling to properly center a div inside another div, but instead of being centered it appears shifted to the right. I've experimented with different positioning combinations and techniques from various sources, yet I haven't found a solution. Here is how it currently appears: https://jsfiddle.net/L13qa1tr/
content_page.html:
<div id="wrapper">
<div id="main-content" class="container">
<h1 class="text-center">This is a test, remove before release.This is a test, remove before release.This is a test, remove before release.</h1>
</div>
</div>
Relevant CSS, content_page.css:
body {
font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: relative;
top: 61px;
width: 100%;
height: 100%;
color: white;
background-color: black;}
html {
width: 100%;
height: 100%;}
h1 {
font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
margin: 0 0 35px;
letter-spacing: 1px;
text-transform: uppercase;}
#wrapper{
background-color: #555555;
width: 100%;
height: auto;
padding: 5px;
margin: 0 auto;}
#main-content {
position: relative;
top: 32px;
left: 88px;
right: 88px;
bottom: 32px;
background-color: #E1E1E1;
height: auto;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;}
If any additional information is required, please let me know. I'm open to suggestions or guidance on how to resolve this issue. Additionally, I find it puzzling that the inner div's width should be set to 100%, yet it doesn't occupy the entire space as expected.