Was looking through your codepen and have a couple suggestions:

1. I wouldn't recommend using percentage values for sizing and positioning, at least not until you've figured everything out in px (you can later convert the values if it makes sense to do so).

2. The positioning and sizing should be done for each circle's id if you want to place one circle within the center of the next--here is an example (I didn't play around long enough to get the correct positions and sizes):

friends {

height: 100px; width: 100px; top: 100px; left: 100px; }

1. Have you thought about creating this diagram in Illustrator or even Photoshop? It would be very easy to insert the diagram as a single image and would probably be less prone to bugs on varying devices/screen sizes.

Stephen- Adding the display property worked perfectly! Thanks!

Taylor- I appreciate your suggestions. I will play with using pixel units instead of percentages and positioning in the ids instead of the class. I can create just about anything in Photoshop no problemo (which is what I would probably do with this if I were actually making it as part of a website), although I don't have Illustrator. In this instance though, it was about practicing with code rather than necessarily yielding production-level output. I'm doing a couple of small projects to feel out whether or not I'm ready to move on to the next segment of the Front-End Web Development Track because it was pretty face-paced and I didn't really feel comfortable diving into JavaScript yet.

If you have any recommendations for getting really comfortable integrating HTML and CSS (like small projects) I'm all ears! : )

Stephen's answer is the most succinct but I also got it to work by giving .circle a position of top: 10% and then resetting #acquitences to top: 0;

take a look: http://codepen.io/mpaarating/pen/tdGri

Thanks Alex! I appreciate the link back to your work in the Pen too, that was helpful.