文字の位置を固定する方法

前提・実現したいこと

サイトを大きくしたり小さくしたりしても文字の位置を固定したいです。

発生している問題・エラーメッセージ

文字の数によって背景が伸びるように作ったデザインを、大きくしたり小さくしたりすると、文字が枠からはみでて位置がずれてしまいます。

該当のソースコード

HTML

<div id="voice">
		<br>
		<div id="voicef"></div>
		<div id="voicewrap">
			<div id="container3">
			<img style="float: left; padding-bottom: 0px; padding-top: 0px; padding-left: 760px; padding-right: 20px" src="images/kao.png">
			<div id="text3">

			ロードマップ拝見しました！<BR>
				今までいかに適当にやっていたかを思い知ること<BR>
				ができました…!!<br>
				間違いなくこれを見て運用すれば目指すアカウン<br>
				トに近づくと思います。ありがとうございました！
		</div></div></div>
		<div id="voicel"></div>
</div>

CSS

#voice { background: url("../images/bg_01.png") no-repeat top center; height:    640px; }
#voicef { background: url("../images/voice.png") no-repeat top center; height:    13px; }
#voicewrap {
	background-image: url("../images/voice_wrap.png");
	background-repeat: repeat-y;
	background-position: center top;
	background-position:50% 0%;
}
#voicel { background: url("../images/voice_last.png") no-repeat top center; height:    14px; }

#text3{
	padding-top: 0px;
	padding-bottom: 5px;
	padding-left:100px;
	text-align: left;
	font-size: 14px;
	color: rgb(30, 122, 165);
	font-weight: lighter;
 }

#container3 {

	padding-top: 10px;
	padding-bottom: 4px;
	padding-left:0px;
	padding-right:200px;
	text-align:left;
	
}