I made a inline-block layout and I have a couple of questions. (Codepen Included).

My codepen : http://codepen.io/mike316/full/VLxBad/

I followed Guils inline-block layout he had us do in one of the videos. In my @media query on line 310 I had to give a margin right of -52px. I'm not sure why I had to give such a big negative number. In Guil's he only had to use -5px. I'm not totally sure if that is correct and if someone could explain to me how to fix this, I would really appreciate it.

My next question concerns lines 314 and 317. The primary content and the secondary content together only total 90% of the total width for the two columns together, and not 100%. I'm trying to figure out why I can only apply 90% to the both columns. I would like the primary to 60% width and the secondary 40% width.

And my final question is about my "Sticky footer" Because the columns are shorter than each other and I want them to appear with two different backgrounds, I added the sticky footer and now the columns are the same size. The problem happens if you resize the browser from the bottom. When you resize the browser up from the bottom and not the sides the footer covers up the words. It's kind of hard to explain. I know I could style the wrapper with a background a certain way but, I wanted to practice the sticky footer way.

Every time I think I'm getting good it seems like I come across some type of difficulty, and I'm kind of getting discouraged. I practice all the time...day and night. I love to make websites, and it's just so much fun. I really want to get good at this, I really love it.

The site is totally responsive so play around with it and let me know what you think about how it changes with viewport. Thanks in advance for any help you can give me with this, I really appreciate it.