Utilizing bootstrap, I have implemented two div elements in my HTML code:
<div class="container">
<div class="col-12 circle lg-circle">
<div class="col-12 circle sm-circle">
</div>
</div>
</div>
The corresponding CSS is as follows:
.circle {
border: solid 0.9px $athens-gray;
border-radius: 50%;
}
.lg-circle {
max-height: 69.375rem;
max-width: 69.375rem;
padding: 7.125rem;
}
.sm-circle {
border-color: $athens-dark;
max-height: 69.375rem;
max-width: 55.0625rem;
}
In the browser view, there appears to be an unwanted right margin.
Query: How can this right margin be eliminated?