Here's the problem:

  @media only screen and (min-width : 390px) and (max-width : 509px) {
    .comment { max-width: 350px; overflow: auto }
    pre { max-width: 260px; }
  }
  @media only screen and (min-width : 510px) and (max-width : 599px) {
    .comment { max-width: 460px; overflow: auto }
    pre { max-width: 340px; }
  }
  @media only screen and (min-width : 600px) and (max-width : 689px) {
    .comment { max-width: 540px; overflow: auto }
    pre { max-width: 400px; }
  }

They are putting max widths on child elements instead of letting the parent control things. It's foolishness.

But then, if you look at the html hacker news generates, it'll put you off your lunch.