HTML / CSS上的额外像素

Question

I want to place my text on a certain part of the web page but when I change left: 0px; to left: 130px; it creates pixels that results in a horizontal bar appearing. Any idea on how can I fix this?

CSS

.main4{
text-align: left;
left: 0px;
line-height: 70px;
margin-top: -30px;
position: absolute;
top: 8px;
width: 98.7%;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
margin-bottom: 0px;
display: block;
}

HTML

<div class="main4">
<h1>Upon Doctor's advice</h1>
<h1>Upon advice by family, friends, relatives, another previous patient</h1>
<h1>Recommended by hospital employee</h1>
<h1>Employee's hospital privilege</h1>
<h1>Reputation as the center of best doctors</h1>
<h1>Recommended for good nursing care</h1>
<h1>Others (Please specify): </h1>
</div>

left: 130px;

left: 0px;

Answer 1

The horizontal bar is caused by content going beyond the width of its parent. Here you've moved .main4 130px to the right, that will have pushed it outside the width of its parent. You need to (a) probably use padding, not position absolute, or (b) decrease the width of .main4 until this doesn't happen.

Answer 2

Just remove width: 98.7%;

 .main4{ text-align: left; left: 130px; line-height: 70px; margin-top: -30px; position: absolute; top: 8px; font-family: "Times New Roman", Times, serif; font-size: 18px; margin-bottom: 0px; display: block; } 

 <div class="main4"> <h1>Upon Doctor's advice</h1> <h1>Upon advice by family, friends, relatives, another previous patient</h1> <h1>Recommended by hospital employee</h1> <h1>Employee's hospital privilege</h1> <h1>Reputation as the center of best doctors</h1> <h1>Recommended for good nursing care</h1> <h1>Others (Please specify): </h1> </div>