David Borrink on "Boxes by header are way off on mobile, but fine on standard browser"

I have a couple of absolute position items set up on the right of a header: a capture box for a subscription signup, and a box with social media icons. They look correct on a standard laptop browser, but on mobile the two boxes are larger than the height of the header and far off to the right, forcing page display wider so that the content of the page is over to the left, whether viewing vertical or horizontal on a tablet (I'm using Kindle Fire for tests).

Here's the link for the site in progress.

Here's my CSS for the "capture box":

#capture-box {
    background-color: #FEE9E4;
    border: 1px solid #CA0B4D;
    box-shadow: 0 0 5px 0 #999999;
    display: block;
    height: 10rem;
    margin: 1.5rem 0 0 49.7rem;
    position: absolute;
    white-space: nowrap;
    width: 18rem;
    z-index: 9999;
}

And here's the CSS for the social media box:

#social-icons {
    display: block;
    height: 4rem;
    margin: 13.7rem 0 0 52rem;
    position: absolute;
    white-space: nowrap;
    width: 16rem;
    z-index: 9999;
}

This is a child theme under TwentyTwelve. I've read that absolute positioning is challenging in responsive design and now I see it. I figured that using percentages and rem values would be the way to make this work, but obviously it's not the way. What is the trick to making the header, capture box, and social media box all appear the same on standard browsers, and horizontal/vertical mobile situations?

I know it's these boxes because I put "display: none" on both items and the pages displayed properly on mobile tests.