移动Chrome和Firefox中的溢出和超大文本

Question

我试图找到更多相关信息，但到目前为止我还不走运。我的网站加载并查看我想要的IE11，FF和Chrome。但是，当我在手机上测试时，它在FF和Chrome中看起来都不正确。我使用的是三星S4。我试图使用iPhone 5s访问我的网站，问题仍然存在。我不确定如何让我的网站与这些应用程序合作，因为我对网页设计很陌生。我已经找到了让我的网站更适合移动设备的方法，但我想知道是否可以简单地让它在每个平台上看起来都一样。这是问题的JSFiddle：

http://jsfiddle.net/willwsharp/da775/

但是，如果我在手机上查看JSFiddle，问题就出现了。更具体地说，菜单按钮溢出网站菜单一点，底部的页脚文本溢出div，而不同页面上的实际信息似乎忽略了div的边框。我知道我的代码看起来也不好看，我正在回去并充实它。

我正在使用重置css文件来标准化浏览器之间的所有细微差别;这是代码：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
 line-height: 1;
}

ol, ul {
 list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}