http://imageshack.us/photo/my-images/690/printef.jpg/ テキストが本文ページからはみ出してしまい、なぜこれが起こっているのかわかりません。テキストは、青い線の別の行から開始する必要があります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" href=""></script>
<title> tech </title>
</head>
<body id="skin" style="background-image:url(img/bck.jpg)">
<div id="root">
<div id="Meniu_header">
<div id="top">
<header id="top_header" style="background-image: url(top.jpg)">
<img src="img/200.jpg">
<h1 id="h1"> UNDER CONSTRUCTION </h1>
</header>
<nav id="meniu">
<ul>
<li> Acasa </li>
<li> Servicii </li>
<li> Contact </li>
</ul>
</nav>
</div>
</div>
<div id="test">
<h2> sajbvljaslblas </h2>
<p> afjkvbafjlbljabadflblajjlaerbladfblaerjlblae </p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
</div>
<div id="pagina">
<div id="stanga">
<div id="optiuni">
<ul id="st_optiuni">
<li> Aluminiu </li>
<li> Plastic </li>
<li> Fonta </li>
<li> Otel </li>
</ul>
<div id="st_scris">
<p> adbnaeasfbabfa </p>
<p> adfbadf fsdbhadad </p>
<p> adfbad af afsd </p>
<p> a dfbad </p>
<p> adfba fa fd</p>
<p> adfb adf adfb </p>
<p> adfb adfb ad </p>
</div>
</div>
</div>
<div id="dreapta">
<section id="dr_articole">
<article>
<header>
<h2> Titlu </h2>
<p class="problema"> This is a long text that it's makeing me problems ..........aaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa </p>
</header>
</article>
</section>
</div>
</div>
<footer>
<p id="footer"> Copyright © 2013 </p>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/ro/"><img alt="Licenţa Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/ro/80x15.png" /></a>.
</footer>
</div>
</body>
</html>
CSSは次のとおりです。
*{
margin: 0px;
padding: 0px;
}
header, nav, section, article, footer{
display: block;
}
body{
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
footer{
display: -webkit-box;
-webkit-box-pack: center;
font-family: Arial, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
#skin{
background-repeat: no-repeat;
background-attachment: fixed;
}
#root{
max-width: 1000px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
border: 2px solid white;
}
#top{
display: -webkit-box;
-webkit-box-orient: vertical;
}
#top_header{
display: -webkit-box;
-webkit-box-orient: horizoantal;
padding: 20px;
}
#h1{
border: 1px solid red;
font: 50px bold Arial;
color: #FFFFFF;
margin-left: 50px;
}
#meniu{
color: white;
display: -webkit-box;
-webkit-box-orient: horizoantal;
background: green;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
#meniu li{
display: inline-block;
text-decoration: none;
list-style: none;
padding: 5px;
font: bold 17px Tahoma;
}
#test{
border: 2px solid red;
width: 800px;
height: 400px;
margin-top: 20px;
margin-left: 100px;
}
#pagina{
display: -webkit-box;
-webkit-box-orient: horizontal;
margin-top: 50px;
border: 4px solid blue;
}
#stanga{
display: -webkit-box;
-webkit-box-orient: vertical;
border: 3px dashed red;
}
#st_optiuni{
display: -webkit-box;
-webkit-box-orient: vertical;
width: 200px;
list-style: none;
padding: 5px 5px 5px 10px;
margin-top: 50px;
border-radius: 8px;
color: #FFFFFF;
border: 2px solid yellow;
}
#st_scris{
display: -webkit-box;
-webkit-box-orient: vertical;
width: 200px;
list-style: none;
padding: 5px 5px 5px 10px;
margin-top: 50px;
border-radius: 8px;
color: #FFFFFF;
border: 2px solid yellow;
}
#dreapta{
display: -webkit-box;
-webkit-box-orient: vertical;
}
#dr_articol{
-webkit-box-flex: 1;
border: 1px dashed yellow;
}
.problema{
color: white;
}