WordPress twenty-twelve child theme responsive layout problems

I’m working with WordPress. I’ve developed a child theme for Twenty Twelve at http://ninemusepress.com

Most of the pages work well on my iPhone (Twenty Twelve is responsive)
— but I run into problems with pages that depend upon templates I made. What looks to be happening is some container is still sized smaller than the browser width (even though I tried to set all containing elements to width: auto)…while other elements stretch across the width of the iPhone browser.

I run into this problem with Safari and the iPhone — though it seems to be working fine in Chrome (i.e. when I resize the window).

I’ve been trying to track down what’s happening with the code, but I can’t for the life of me figuring out which elements are the issue. I’m about to tear my hair out.

You can see an offending page here: http://ninemusepress.com/edgar-wilde-and-the-lost-grimoire/

And here’s a screenshot of the page on my iphone: http://ninemusepress.com/images/iphone.png

Here’s my child theme’s media queries section of the CSS:

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 

#primary {
    width: auto;
} 

#book-description {
    width: auto;
}

.page-template-page-templatesbook-php .site-content {
    width: auto;
}

#secondary {
    width: auto;
}

.page-template-page-templatesbook-php .site-content {
    width: auto;
}

#book-cover {
    float: left;
    width: 200px;
}

#book-cover img {
    max-width: 190px;
}

.page-template-page-templatesbook-php article {
    float: left;
    width: auto;
    margin:0;
}

.page-template-page-templatesbook-php .entry-header {
    margin: 0;
}

#book-description {
    float: left;
    width: auto;
    margin: 0;
}

#book-purchase {
    float: left;
    width: auto;
    position: relative;
    top: 0;
}


#book-cover {
    width: auto;
    margin-bottom: 15px;
}

#book-cover img {
    width: 90%;
}

#book-description {
    width: auto;
    margin: 0;
}


.home #primary {
    margin-top: 0;
}

.sample-page {
    width: auto;
    padding: 0;
}

.sample {
    position: relative;
    top:  0;
    width: auto;
}

.book-info {
    width: auto;
    margin-bottom: 50px;
    -webkit-box-shadow: 0 0 0 0 #ccc;
    -moz-box-shadow: 0 0 0 0 #ccc;
    box-shadow: 0 0 0 0 #ccc;
}

  #goodreads-widget {
    width:  690px;
  }

  .bbPress .site-content {
    width: auto;
  }

  .bbPress .widget-area {
    width: auto;
  }

  .page-template-page-templatesbook-php article {
    width: auto;
  }

  .site {
    width: auto;
  }

}

/* Landscape phones and down */
@media (max-width: 480px) { 

    #primary {
        width: auto;
    } 

    .site {
        width: auto;
    }
    #secondary {
        width: auto;
    }

    .page-template-page-templatesbook-php .site-content {
        width: auto;
    }

    .page-template-page-templatesbook-php article {
        width: auto;
    }

    #goodreads-widget {
        display: auto;
    }

    #book-description {
        width: auto;
    }

    #main, .wrapper {
        width: auto;
    }

}