a webpage i worked on looks messed up on a samsung galaxy s4 but i cant figure out what the issue is. the fonts in the div are too big and then they're overflowing and push the rest of the divs down out of their respective boxes. i'm using percentage for the font-sizes so i don't know how they're all weird. any advice, i'd be greatful. link: http://nonasbali.com/rates.html

here's the css:
Code:
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
@import url(http://fonts.googleapis.com/css?family=Noto+Sans:700);

/** EM css reset **/
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;
}


/*** COLORS
 * DARK-GREY: #0B0C0B
 * white-grey: #B7B8B7
 * mid-grey: #6A6A6A
 * light-grey: #D5D5D5   
 * green: #757B36 
 */

body {
    background:#0B0C0B;
    font-size: 14px;
}

#wrap {
    position:absolute;
    width:1200px;
    left:50%;
    margin-left:-600px;
    margin-top:14px;
}

.clear {
    clear:both;
}

h1, h2, h3, h4, h5, h6, p, a {
    font-family: 'Noto Sans',Helvetica, Arial, sans-serif;
    font-size: 100%;
}

h1 {font-size:120%;color:#D5D5D5;}
h3 {font-size:200%;color:#B7B8B7;}
h4 {font-size:250%;color:#D5D5D5;}
h5 {font-size:400%;color:#0B0C0B;}

.green {color:#757B36;}
.white {color:#ffffff;}
.bold {font-weight:700;}
 
/*** HEADER ***/
#header {
    width:1200px;
    height:220px;
    margin-bottom:20px;
}

#logo {
    float:left;
    width:270px;
    margin-left:10px;
}
#nav {
    width:930px;
    height:40px;
    float:right;
    position:absolute;
    top:175px;
    right:0px;
}
#nav a{
    display:block;
    float:left;
    border-top: 1px solid #ffffff;
    width:140px;
    margin-left:15px;
    text-decoration:none;
    color:#B7B8B7;
    text-align:center;
    line-height:40px;
    font-size:120%;
}
    
#nav a:hover, #nav a.current {
    border-top: 5px solid #ffffff;
    color:#ffffff;
    position:relative;
    top:-4px;
}


/*** MAIN ***/
#main {
    width:960px;
    margin:0 auto;
    background:#ffffff url('../images/grad.jpg') repeat-x;
    padding:40px 0 20px 20px;
}
#main p {
    width:700px;
    color:#0B0C0B;
    font-size:110%;
    line-height:1.4em;
    margin-top:20px;
}
#main div.roomboxes {
    width:900px;
    height:221px;
    background:#6A6A6A;
    margin-top:40px;
    margin-left:20px;
    position:relative;
}
#main div.roomboxes img {
    float:left;
    border-right:2px solid #000000;
}
#main div.roomboxes img.book {
    position:absolute;
    right:20px;
    bottom:20px;
    z-index:10;
}
/* button span style */

#main div.roomboxes span.bttn {
    background:#ffffff;
    width:120px;
    height:32px;
    position:absolute;
    right:20px;
    bottom:20px;
}
#main div.roomboxes div.boxtext {
    float:right;
    width:580px;
    margin-top:30px;
}
#main div.roomboxes div.boxtext p {
    width:560px;
    font-size:80%;
    color:#ffffff;
    margin-bottom:20px;
}