縮小后，為什么網頁上的文本沒有保留在原位？

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中也可以正常工作