缩小后，为什么网页上的文本没有保留在原位？

Question

网络开发人员 菜鸟在这里！ 在Chrome浏览器中，当我缩小此页面时 ，文本会变紧到角落。 但是，当我使用Safari时，它不会发生。 我假设这是CSS问题和/或我将其输入HTML的方式。 我把它放在这里 jsfiddle上。

.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;

因为您使用的是负边距，所以它隐藏在屏幕中

而且您的链接在我的Chrome中也可以正常工作