I am not sure if that is exactly how you wanted to center the circles so I centered both circles within a div in a row with one overlapping the other one slightly. You can have a look here how it might look like.
You can see that I used Flexbox to achieve that result. I wrapped both circles in a div on which I used display: flex. On top of that, I centered the text of each circle within the div, using display: flex and related flexbox properties once again.
Obviously you could now play with the size of each circle depending on your preference.
Hope it helps.
You could also use flexbox in bootstrap
just add class d-flex justify-content-center to the parent and maybe align-items-center also
I am trying to center two overlapping circles within a div but it’s not working because of the style of margin-right -100. That is the style that is causing them to overlap. I have tried to set the style of margin: 0 auto on the div around it but it does not work. I’ve also tried to use some bootstrap and make columns to help center them but nothing is working so far. I’ve added a codepen down below for a proper demo.
#projects {
background-color: #3f4756;
width: 100%;
height: auto;
text-align: center;
padding-top: 15em;
padding-bottom: 10em;
margin: 0 auto;
}
#projects h2{
color: white;
font-family: BrandonGrotesque, Brandon Grotesque;
font-size: 3.75em;
margin-bottom: 1.5em;
font-style: normal;
font-weight: 500;
letter-spacing: 2px;
}
.circle {
display: inline-block;
height: 30em;
width: 30em;
line-height: 18px;
border-radius: 50%;
color: white;
margin: 0 0 0 -100px;
}
#projects > a:nth-child(3){
position: relative;
z-index: 1;
background-color:#a3abbd;
text-decoration: underline;
}
#projects > a:nth-child(2){
position: relative;
z-index: 2;
background-color: #a4844e;
text-decoration: underline;
}
#projects > a:nth-child(2) > p, #projects > a:nth-child(3) > p {
margin-top: 4em;
font-size: 3em;
font-family: BrandonGrotesque, Brandon Grotesque;
font-weight: 350;
}
<div id="projects" class="skew">
<h2>My Projects</h2>
<a href="#" class="circle">
<p>web</p>
</a>
<a href="#" class="circle">
<p>graphics</p>
</a>
</div>
I totally forgot about trying flexbox. Thank you.
Flexbox is great in my opinion. Glad it helped. Good luck.
