Hey there, check out my website at . I'm seeking assistance with a specific piece of code.
CSS:
.pagemenu {
padding-top: 25px;
padding-right: 2%;
padding-left: 2%;
text-align: center;
}
.bubblewrap {
display: inline-block;
vertical-align: top;
width: 23%;
margin-right: 5%;
margin-left: 5%;
text-align:center;
}
.bubble {
background-color: white;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: black;
width: 250px;
height: 250px;
display: inline-block;
}
HTML for one of the five circles (I've shown just one but they all use the same html and are wrapped in the same pagemenu div)
<div class = "pagemenu">
<div class = "bubblewrap">
<div class="bubble">
<div class="text">
<a href ="#aboutme">ABOUT</a>
</div>
</div>
</div>
</div>
The issue is that the W-shaped alignment formed by the five circle divs under the header on my page isn't always perfectly centered. Upon inspecting the source code, I noticed that the "bubbles" aren't always horizontally centered within the bubble wrapper. Any ideas on how to ensure that the bubble div aligns itself horizontally within the bubblewrapper div?