CSS Positioning Elements Problem!

HTML-CSS
1

I thought I had an understanding of CSS but now I am getting extremely frustrated and cant figure out how to get anything to work the way I wanted.

I want to know why the box goes into the side-navbar I am trying to make and then why I cant position that orange box inside purple box to be completely centered. If I add margin to just the orange box it moves the purple box too…but i thought since the orange box is inside the purple box then its confined to that boxes width. So then the margin should only effect the area inside the purple box?

Here’s the code I’ve been at this for 2 days now and nothing I do works.

2

Flexbox is great for positioning elements.

You can remove the position elements and add display: flex to put the boxes next to the nav and then add display: flex to the outer box and use justify-content & align-items to center the inner box.

Try this tutorial on flex-box, you will get the knowledge you need to solve your problem early on in this tutorial.

Please try and do it yourself but if you really get stuck here is a forked version of your pen that uses flexbox

1 Like
3

I’m going to try it myself first, been watching some videos to learn css better. Going to check out that game for leaning CSS though.

4

theres also the flexbox challenges here at FCC but the frog game is a nice change of pace

5

I did the flexbox challenges but I guess I didn’t understand it like I thought I did.

6

Well I gave it a go and I got my first problem solved it seems, but many more have come up. Any good resources on media queries and making the website more mobile friendly?