Я создал простой веб -сайт для личного использования, но одна из панелей движется ⇐ CSS

[Anonymous]

Хорошо, поэтому я создал простой веб -сайт по личным причинам, и я столкнулся с проблемой. Если вы запускаете код ниже и посмотрите на белую панель на правом классифицировании как .newsledtter и изменение размера экрана, он выходит из места в отличие от того, что выше, которое я только что плаваю правильно. Но если я проплываю это вправо, то он плывет к середине страницы, но работает так, как я хотел бы, чтобы это ... Я собираюсь сделать это отзывчивым, и мне нужно будет иметь ее как приведенный выше. Новый рассылку для этого. У тебя есть исправление ... ?? Пожалуйста, помогите! Спасибо! < /p>

code:
html: < /p>

Код: Выделить всё

Home

[*]







[list]

[url=#]Contact[/url]

[*]
[url=#]Products[/url]

[*]
[url=#]About[/url]

[*]
[url=#]Home[/url]

[/list]




Here is just a simple title


This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.





Welcome to


A dummy website!!




Latest News



March 28, 2015

New advanced update with double speed and a whole bunch of cool new st.. [url=#]more>>[/url]

March 28, 2015

New advanced update with double speed and a whole bunch of cool new st..  [url=#]more>>[/url]










< /code>
< /div>
< /div>
< /p>

css: < /p>


* {
margin: 0;
padding: 0;
}
@font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body {
background: #ebebeb;
width: 80%;
height: 1300px;
}
.container {
width: 100%;
}
.mainHeader nav {
width: 95%;
height: 40px;
position: relative;
left: 30px;
top: 60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul {} .mainHeader nav ul li {
float: right;
display: inline;
text-align: center;
border: 1px solid #ADADA8;
border-bottom: none;
border-top: none;
border-left: none;
padding-top: 20px;
}
.mainHeader nav ul li.last {
border-right: none;
}
.mainHeader nav ul li a {
text-decoration: none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family: Arial;
position: relative;
top: -10px;
color: white;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
}
.mainHeader nav ul li a:hover {
background: -webkit-linear-gradient(#FFA313, #FB9F0E);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFA313, #FB9F0E);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFA313, #FB9F0E);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#FFA313, #FB9F0E);
/* Standard syntax */
}
.topArea {
width: 95%;
height: 300px;
position: relative;
left: 30px;
top: 10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* Standard syntax */
}
.topArea .topAInfo {
margin: 20px;
padding-top: 60px;
width: 60%;
margin: 50px;
font-family: ;
}
.topArea .topAInfo h2 {
font-family: SketchFont;
font-weight: normal;
}
.topArea .topAInfo p {
line-height: 25px;
font-family: cursive;
font-size: 15px;
}
.bg {
width: 100%;
height: 1200px;
position: relative;
left: 10%;
background: linear-gradient(blue, white, white, blue);
/* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea {
background: linear-gradient(white, white, #55C4E9);
/* Standard syntax */
;
height: 600px;
width: 95%;
position: relative;
left: 30px;
top: 10px;
}
.middleArea .middleAInfo {
padding: 30px 0 0 30px;
}
.middleArea .middleAInfo p {
color: #49CBF0;
font-size: 30px;
font-weight: 400;
}
.middleArea .latestNews {
width: 250px;
height: 300px;
background: #0099cc;
float: right;
position: relative;
top: -60px;
}
.middleArea .latestNews hr {
position: relative;
top: 50px;
color: black;
width: 90%;
margin-left: 10px;
}
.middleArea .latestNews h2 {
padding: 10px 10px 10px 10px;
color: white;
}
.middleArea .latestNews p.date {
color: white;
font-size: 13px;
font-weight: bold;
padding: 10px 10px 10px 20px;
}
.middleArea .latestNews p {
color: white;
font-size:  13px;
position: relative;
left: 10px;
width: 225px;
}
.middleArea .latestNews a {
color: blue;
font-size: 15px;
font-family: Arial;
}
.middleArea .rightInfo .newsLetter {
background: white;
width: 250px;
height: 170px;
position: relative;
top: 250px;
left: 75.6%;
}

Подробнее здесь: https://stackoverflow.com/questions/293 ... nels-moves