I am currently dealing with the following CSS parameters:
.container{
width: 100%;
margin: 1rem;
border: 1px solid black;
}
.inner-container{
margin: 1rem;
border: 1px solid gray;
}<div class="container">
<div class="inner-container">
Hello World!
</div>
</div>I noticed that there is an uneven space between the "inner-container" and the "container" elements. The space on the right side appears to be twice as large as the space on the left side.
https://i.sstatic.net/BuFdc.jpg
My goal is to center the "inner-container" within the "container".
I have tried adjusting the margins using the following suggestions:
body{ margin: 0px } // recommended by @Uttam
and another suggestion from a different user that has since been deleted:
*{
margin: 0;
padding:0;
}
Unfortunately, neither of these solutions have resolved the issue for me. I also attempted using a reset CSS or setting "position: relative" on the "container" and "position: absolute" on the "inner-container", but the problem persists.
Note: Although I appreciate the assistance provided by @Uttam and @Temani Afif, their solutions do not seem to work in my case. Here is the entirety of my code:
* {
margin: 0;
padding: 0; }
html {
font-size: 62.5%; }
body {
font-family: "Times New Roman", Times, serif;
}
.container {
width: 98%;
margin: .5rem;
border: 1px solid #000;
border-radius: 7px;
text-align: justify;
}
.inner-container {
max-width: 100%;
background-color: #eee;
text-align: justify;
border: 1px solid #337ab7;
border-radius: 1rem;
padding: 0.5rem 0.5rem;
margin: 0.5rem 0 0.2rem 0.1rem; // attempting to correct the spacing issue
box-shadow: 1px 1px gray;
}