Manipulating div elements to get them in place

Hi everyone,

I know this is a very solvable problem but for some reason I can’t seem to understand how to manipulate div’s to get them into places I want. I’ve just started working on the random quote project but I’m having a difficult time getting my quote text to be centered in the middle div as well as move my “next quote” button down to the bottom right. Whenever I try adjusting the margins it shifts everything along with it. I feel like the learning curve with div manipulation is higher than learning javascript haha.

I’ve linked my CodePen project for you guys to look at. Let me know the proper way to position divs with css because I’ve been relying on trying to use margin and padding which hasn’t been working out too well.


Hmmm I just noticed my title gets shifted over to the right if the window gets too narrow as well! Any tips on how I can center it while still remaining flexible?


It’s not just you, this is a huge pain for just about everybody. The easiest solution is to use Bootstrap, or some other library/framework with a grid system. If you insist on the DIY approach, build out a grid system of your own and reuse it for each project because life is too short to be spent positioning divs.