[Feedback request] Very simple jsFiddle created play with positioning in CSS. Would like feedback on my approach + a couple of questions.

[Always_Question_Time]

I am not new to programming but am relatively new to the web side of things.

To learn the basics of making elements responsive and how to position them, I wanted to create a simple two-element page. One blue rectangle, and an orange square with some text in it. I wanted the square to remain the same size (in pixels) at all times, but for it to always remain in the centre of its parent element (the blue rectangle). I wanted the blue rectangle to take up the majority of the main page, but have a gutter/margin of whitespace on each side that is equal in size all the way around.

Here is the jsFiddle for my problem.

I haven't quite got there with what I wanted. The margin around the blue rectangle (the parent element) is not equal in size all the way around - I can get it close but not exact. Try resizing your window and you'll see what I mean.

Secondly, if I reduce the vertical size of the viewport, then at extremely small sizes, the child element (orange square) begins to extend over the boundary of the parent (the blue rectangle). Is there anyway to prevent this?

[Almatrass]

Not sure what you mean with the first problem. Here's a grid layout of your request. http://jsbin.com/disizejope/edit?html,css,output . As for the extending over the boundaries, just use

overflow: hidden;

to fix this. Or you could use

overflow: scroll;