我如何摆脱这个溢出问题？

Question

on this page ( http://whitewashed.richiesiegel.com ), when the page width is < 400px there is some extra room on the right that i'd like to get rid of.

here's the media query

@media handheld, screen and (max-width: 400px) {

    #nav {
        height: 30px;
        background-color: white;
        font-size: 1.3em;
        padding-top: 9px;
        padding-bottom: 10px;
        text-transform: uppercase;
        overflow: hidden;

    }

    #nav span {
        color: #272732;
        letter-spacing: .192em;
        font-family: "brandon-grotesque",Helvetica,sans-serif;
        font-weight: 100;
        text-transform: uppercase ;
    }
    }

any ideas? overflow or margin issue?

Answer 1

From what I can see, your nav has nothing to do with this. I've located one element that is causing this: #footnote has a calculated width of 475px at viewport of 400px. You can easily fix this one by using box-sizing: border-box; on that element (with the -moz- and -webkit- prefixes in addition). Fixing this div fixes most of your whitespace issue.

The rest of the additional space seems to be caused by your .text and .intro divs. At 400px viewport, .text are a total of 410px wide and .intro is 420px, which appears to be some margin and/or padding. You can do similar to above by using box-sizing or shrink the width.

If you go the box-sizing route, which I highly recommend for responsive design because it accounts for padding and borders when calculating width, you'll need to increase the padding to give your text some room to breathe.