I first created a 3rd div. Then I positioned the box to float right. To make the gap between div1 and div3, I made div3 a border-box, and gave it a margin of 5px so that there would be a gap between the two boxes.
For the second challenge, I forked Challenge 1 to keep the three divs. Then I made div1 position: relative so that it would stay in the top left corner. For div 2, all I did was make positioning: relative so that it kept its place in the block, but margin:auto so that it would be centered. For div3, I used absolute positioning because nothing was below it, and it didn't need to hold its space. Then I just used right: 0 to make it line up with the right margin.
[Challenge 2] (https://codepen.io/jackmallahan/pen/jmYWRm)
For the third challenge, I forked Challenge 2, but deleted the third div. Then I made the first div double the size by making the height and width 200px. I gave div1 absolute positioning so that it would give up its block functionality. I moved it 400px from the left margin, so that it was centered. For div2, I made it relative, with auto margins so that it was centered. I gave it margin-top: 100px so that it would move down. I then had to go back and give div1 a margin-top of -50px to make div2 be directly in the center.
[Challenge 3] (https://codepen.io/jackmallahan/pen/dWJMPx)
For this challenege, I first swapped the color of the divs so that div1 was black and div2 was darkgray. Then I positioned both of the divs absolutely so that they would be stacked in the top left corner. Then I moved div2 50px from the left margin and 50px from the top margin so that it would be half of the way removed diagonally.
[Challenge 4] (http://codepen.io/jackmallahan/pen/JNMqyV)
For this challenege, I created a third div. Make the background color for all divs black. Then I positioned all of them relatively, so that they would remain block elements. Then for div1 I moved it 800px from the left margin because I had set my screen width at 900px. For div2, I gave it auto margins so that it would be in the middle, and for div3 I left it right where it was with just relative positioning. I then decided I should try to figure out how to make the first div responsive, so I changed the positioning to absolute, gave it a margin of 0px to the right, and gave div2 margins of 100px, auto, 0, auto so that it was still centered but 100px from the top. This moved my absolute box down as well because it increased the total top margin, so I gave div1 a margin-top of -100px.
[Challenge 5] (http://codepen.io/jackmallahan/pen/KmZLoQ)
For this challenge, I made the background of div1 dark gray and then made its width 300px and height 150px becuse it looked about 3x wider than before and about 1.5x taller. I positioned it absolutely, and set it to the bottom-right using bottom: 0 and right: 0. Then I did the same positioning with div2 and div3, except that I moved div2 200px off of the right and I moved div3 50px off the bottom.
[Challenge 6] (http://codepen.io/jackmallahan/pen/xdpoxx)
For this challenege, I made div1 positioned absolutely so that it would not take up its block. Then I doubled it in size by changing its parameters to 200px width and height. Then I set div2 to relative and moved it 100px from the left margin and from the top so that it is in the bottom right corner of div1.
[Challenge 7] (https://codepen.io/jackmallahan/pen/MmQPpO)
For this challenge, all I had to do was fork challenge 7 and then delete the top 100px margin from div2.
[Challenge 8] (https://codepen.io/jackmallahan/pen/pPaOVy)
For this challenege, I made a div3 which I set to position: relative. I made div1 300px tall, and then moved div3 100px from the top and 50px from the left to center it within div1.
[Challenge 9] (https://codepen.io/jackmallahan/pen/MmQqxJ)
For this challenge, I nested div2 and div3 within div1. Then I set all three to absolute positioning. Then I moved div1 100 px from the left and 50px from the top. I couldn't decide whether we were supposed to do a fixed distance from the left, or a percentage. I tried it at 40% which looked centered on my screen, but then when I shrank my screen it became off-center. So I stuck with just moving it 100px from the left. For div2, I made it absolute positioning within div1 and moved it 50px from the top. I did the same with div3 but then moved it to 0px from the right.
[Challenge 10] (https://codepen.io/jackmallahan/pen/LyQgyq)