<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<menu></menu>
<main clas="clear">
<aside></aside>
<article></article>
</main>
<div class="clear"></div>
<footer></footer>
</body>
</html>
*{
margin: 0;
padding: 0;
}
html,body{
height:100%;
}
.clear{
display:block;
clear:both;
}
.clear:after{
content:'';
display:block;
clear:both;
}
header,main,footer,menu
aside,section,article{
display:block;
}
header,menu,main,footer{
width:80%;
margin:3px auto;
border:1px solid #ccc;
}
header{
height:120px;
}
menu{
height:40px;
}
main{
border:none !important;
}
main aside,article{
float:left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
min-height:400px;
border:1px solid #ccc;
}
main aside{
width:30%;
}
main article{
width:65%;
margin-left:5%;
}
footer{
height:180px;
}
<div id="mainmenu">
<ul>
<li><a href="#"> Пункт 1 </a></li>
<li><a href="#"> Пункт 2 </a></li>
<li><a href="#"> Пункт 3 </a></li>
<li><a href="#"> Пункт 4 </a></li>
<li><a href="#"> Пункт 5 </a></li>
</ul>
</div>
* {
margin:0;
padding:0
}
#mainmenu {
position: relative;
overflow:hidden;
height:30px;
margin:20px 0
}
#mainmenu ul {
list-style:none;
margin:0;
padding:0;
position: relative;
left:50%;
float:left;
font:14px Arial, Helvetica, sans-serif;
height:30px
}
#mainmenu ul li {
position:relative;
left:-50%;
float:left;
margin:0 5px;
height:30px
}
#mainmenu ul li a {
display:block;
text-decoration:none;
padding:4px 10px
}
#mainmenu ul li a:hover {
background-color:#444;
color:#ffffff
}