Witam, czy ktoś wytłumaczy dlaczego stopka wychodzi poza container? Chciałbym żeby stopka znajdowała się na białym tle. Jeśli komuś się będzie chciało prosiłbym o wyczerpanie tematu gdyż jestem nowy.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Strona domowa</title>
<meta name="description" content="Serwis poświęcony systemowi Linux. Naucz się wszystkiego, co chcesz wiedzieć o Linuxie!" />
<meta name="keywords" content="linux, kurs, nauka, poznaj, co to jest linux, ubuntu, debian, mint, fedora, wybierz dystrybucję, instalacja linux, polecenia, terminal, bash" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div class="bar">
<img src="logo.jpg">
<div id="menu">
<div class="option"> Home </div>
<div class="option"> About </div>
<div class="option"> Products </div>
<div class="option"> Services </div>
<div class="option"> Contact </div>
</div>
</div>
<div class="header">
<div id="tlo">
<img src="logotlo.jpg">
</div>
</div>
<div class="content">
<img src="obraz.jpg">
<h1> Great slogan!</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus nisl aliquam, consectetur metus et, varius ante. Mauris cursus est et feugiat tristique. Ut a vulputate ex. Nam sagittis, elit eget tempor posuere, eros elit convallis velit, vel elementum eros nisl sit amet elit. Donec sit amet dapibus sem, at elementum est. Etiam pretium enim quis ante consequat mattis. Suspendisse maximus malesuada nunc vel laoreet. Quisque sollicitudin, odio sollicitudin molestie rutrum, purus lacus sagittis lorem, at sodales felis tortor a neque. Vestibulum eleifend et tellus id malesuada. Maecenas dolor nisi, tempus eu venenatis a, maximus ac nunc. Etiam ligula neque, pellentesque eu fermentum non, porta eget ante. In nec mi vel lacus rutrum ullamcorper sit amet nec arcu. Pellentesque pulvinar sapien pharetra faucibus laoreet. Quisque lorem enim, vestibulum sit amet aliquet id, ullamcorper vitae sem. Proin at risus in neque gravida faucibus quis id felis. Maecenas pellentesque enim in finibus consequat.
<ul>
<li>
Sed eget dictum neque, vitae ultricies metus. Sed condimentum lectus sit amet quam lacinia
</li>
<li>
Suspendisse laoreet sit amet nisl eget tempus. Ut ut felis bibendum, hendrerit nunc feugiat
</li>
<li>
nunc. Quisque ex odio, tincidunt ut vehicula quis, consectetur id ex.
</li>
<li>
vitae. In hac habitasse platea dictumst. Suspendisse sed odio id ligula ullamcorper vulputate.
</li>
<li>
Nunc vulputate pellentesque sodales. Quisque condimentum nibh non fringilla rhoncus.
</li>
<li>
malesuada. Curabitur luctus lacinia mattis. Curabitur tempor elit id hendrerit tempus.
</li>
<li>
eleifend risus ultricies at. Nulla vehicula nec odio sit amet molestie.
</li>
</ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus enim quis commodo pellentesque. Vivamus fringilla ullamcorper dolor, id sagittis est sollicitudin in. Maecenas erat tellus, posuere quis viverra vel, aliquam non ante. Cras scelerisque ornare urna, non porta dolor faucibus sit amet. Phasellus aliquam, massa id porta condimentum, eros turpis mattis nisl, ut gravida massa est in velit. Sed ut augue imperdiet, tempus massa eget, ullamcorper ligula. Nullam malesuada aliquet ornare. Donec ac pharetra metus. Fusce non egestas metus. Curabitur auctor justo id magna rutrum, eget mollis nulla tincidunt. Duis nec lacus aliquet, dapibus dui maximus, vehicula lacus.Integer iaculis mi interdum ex pharetra dapibus. Fusce lacinia sed justo scelerisque bibendum. Duis vel risus fermentum, laoreet justo id, dapibus turpis. Donec risus lectus, tincidunt eu libero eu, gravida bibendum neque. Aenean vitae leo id sapien faucibus facilisis. Cras vel vestibulum leo. Cras mattis felis nunc, ac iaculis urna facilisis vel. Aliquam at volutpat justo.
</div>
<div class="stopka">
<div class="option1"> Home </div>
<div class="option1"> About </div>
<div class="option1"> Products </div>
<div class="option1"> Services </div>
<div class="option1"> Contact </div>
</div>
</div>
</body>
</html>
body
{
background-color:#ff9900;
}
#container
{
width: 95%;
margin-left: auto;
margin-right: auto;
background-color:white;
margin-top: 45px;
}
.bar
{
width:100%;
margin-top: 1px;
}
.bar img
{
float:right;
width: 20%;
height: 120px;
padding: 1px;
}
.header
{
width: 100%;
}
#menu
{
background-color: #208208208;
margin-top: 7px;
float:left;
}
.option
{
float: left;
min-width: 60px;
height: 25px;
font-size: 15px;
font-weight: bold;
padding: 20px;
padding-top: 50px;
opacity: 0.8;
color: #cc6633;
}
#tlo img
{
width: 100%;
height: 350px;
border-top-style: solid;
border-top-color: #ffff33;
border-top-width: 5px;
margin-top: 2px;
}
.content img
{ float:right;
margin: 15px;
border-style: dotted;
border-color: #996600;
height: 200px;
}
.content
{
text-align: left;
padding-left: 25px;
}
.content h1
{
color:#ff6600;
text-decoration: underline;
}
.option1
{
float: left;
min-width: 60px;
height: 20px;
font-size: 15px;
font-weight: bold;
color: #0e0e0e;
margin-bottom: 50px;
border-right-style: dotted;
border-right-width: 2px;
}
.stopka
{
margin-top: 10px;
}