Why does the text on my webpage not stay in place when zoomed out?

Question

Web dev. noob here! In Chrome when I zoom out on this page , the text gets crunched up into the corner. It doesn't happen when I use Safari though. I'm assuming it's a CSS issue and/or the way I've entered it into HTML. I've put it on jsfiddle here .

.second {
font-family: helvetica neue, arial, sans-serif;
font-size: 30px;
font-weight: lighter;
line-height: 5px;
position: relative;
top: 5px;
width: 500px;
margin-left: -330px;

}

.third {
font-family: helvetica neue, arial, sans-serif;
font-size: 40px;
font-weight: lighter;
line-height: 0px;
position: relative;
top: 5px;
margin-bottom: 70px;
width: 500px;
margin-left: -330px;
}

.fourth {
font-family: helvetica neue, arial, sans-serif;
font-size: 20px;
font-weight: lighter;
line-height: 0px;
position: relative;
top: 30px;
width: 500px;
margin-left: -335px;
background-color: white;


<p class="second"><b>Barter</b> a textbook <b>you have</b></p>
<p class="second">for a textbook <b>you want</b></p>
<p class="second">with a fellow <b>Aggie</b> on campus,</p>
<p class="third"><b><i>now</i></b>.</p> 

Answer 1

margin-left: -330px;

because you are using negative margin thats why it hide in the screen

and also your link is working fine in my chrome