Aligning a div within another div

Question

Ok here is my site http://joshadik307.github.io/ . And here is the specific code I need help with

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 5 circles (I figured it would save space to just show one, but they all use the same html and are all 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>

Ok now here is the problem. If you look at my sight (linked to above) basically I have 5 circle divs set up to align themselves in the shape of a W at the top of the page (under the header.) The problem is the W is not always center aligned on the page, and after looking at the source on chrome, I realized that this is because the "bubbles" are not always horizontally centered within the bubble wrapper. Does anyone know how I can fix it so that the bubble div always aligns itself horizontally within the bubblewrapper div?

Answer 1

Add margin: auto; into your .bubble class

.bubble {
background-color: white;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: black;
width: 250px;
height: 250px;
margin: auto;
}

Answer 2

A margin:0 auto; to your .bubble class will do the fix :)