Я недавно создал веб-сайт, который использует разделы вместо div, потому что я хочу, чтобы div плавал в одном ряду с одним и тем же div, и это делает меня довольно запутанным.
Предположительно, я хотел бы, чтобы это было в заголовке веб-страницы, но каждый раз, когда я пытаюсь удалить контейнеры, элементы div делятся друг на друга, заставляя их использовать свойства CSS, которые я явно не хочуслучиться.
Как выглядит мой заголовок 
Как должна выглядеть моя страница 
Пример того, что произойдет, если вы удалите контейнеры 
Я хочу, чтобы мои div'ы складывались бок о бок в одном и том же div, и что единственный эффективный способ, который я нашел - этоиспользование разделов, но это не стандарт HTML5.
Скажите, пожалуйста, как я могу исправить свой код, чтобы я мог соответствовать стандарту HTML5, спасибо.
header, nav, footer, section, clipper, SliderFrame, Picture {
display: block;
margin-bottom: 20px;
}
* {
margin: 0px;
padding: 0px;
}
#clipper
{
float:left;
margin-bottom: 20px;
}
#SliderFrame
{
margin-left: auto;
margin-right: auto;
border: 1px solid;
width: 830px;
height: 450px;
}
#Prices1of3
{
width: 175px;
border: 1px solid;
margin-left: 330px;
float: left;
}
#Prices2of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Prices3of3
{
width: 175px;
border: 1px solid;
margin-left: 175px;
float: left;
}
#Picture
{
margin-left: 620px;
margin-right: auto;
width: 449px;
height: 226px;
}
#Content
{
margin-left: auto;
margin-right: auto;
max-width: 1260px;
min-width: 780px;
width: 780px;
}
#container
{
margin:0 auto;
background-color:#66B034;
max-width: 1260px;
min-width: 780px;
width: 90%;
color: #000;
font-family: "Trebuchet MS", Arial, Heletica, sans-serif;
}
#logo {
float: left;
width: 302px;
height: 72px;
background-image:url(../images/Logo/Logofin.gif);
background-repeat:no-repeat;
border: 1px solid;
margin-right: 143px;
}
header h1{
visibility: hidden;
}
nav ul li{
list-style: none;
border: 1px solid Gray;
display: inline;
}
nav ul li a{
text-align: center;
padding: 1px;
display: inline-block;
}
nav {
border: solid medium Black;
float: left;
width: 70%;
margin: 1px;
display: inline-block;
}
nav.nav_item1 {
}
nav.nav_item2 {
}
nav.nav_item3 {
}
nav.nav_item4 {
}
section{
border: solid medium Black;
}
footer{
border: solid medium Black;
clear: both;
margin: 10px;
padding: 5px;
}
section ul, ol{
margin: 15px;
}
.mySlides
{
width: 830px;
height: 330px;
display:none
}
.w3-left, .w3-right, .w3-badge
{
cursor:pointer
}
.w3-badge
{
height:13px;
width:13px;
padding:0
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Bog Snorkelling</title>
<link rel="stylesheet" href="../assets/css/webber_1.css" >
<div id="clipper">
<section>
<div id="logo">
</div>
<div id="Navigation">
<nav>
<ul>
<li class="nav_item1"><a href= "../index.html">Home</a></li>
<li class="nav_item2"><a href= "../bogsnorkeling/bog.html">Bog Snorkelling</a></li>
<li class="nav_item3"><a href= "../football/foot.html">Football</a></li>
<li class="nav_item4"><a href= "../golf/golf.html">Golf</a></li>
<li class="nav_item4"><a href= "../racketsports/racket.html">Racket Sports</a></li>
<li class="nav_item5"><a href= "../bookingsfailure/bookingfail.html">Bookings Failure</a></li>
<li class="nav_item6"><a href= "../bookingssuccess/bookingsuccess.html">Bookings Success</a></li>
<li class="nav_item7"><a href= "../bookings/bookings.html">Bookings</a></li>
<li class="nav_item8"><a href= "../community/community.html">Community</a></li>
<li class="nav_item9"><a href= "../induction/induction.html">Induction</a></li>
<li class="nav_item10"><a href= "../inductionsuccess/inductionsuccess.html">Induction Success</a></li>
<li class="nav_item11"><a href= "../inductionfailure/inductionfail.html">Induction Failure</a></li>
<li class="nav_item12"><a href= "../facilities/facilities.html">Facilities</a></li>
<li class="nav_item13"><a href= "../contactus/contactus.html">Contact Us</a></li>
<li class="nav_item14"><a href= "../contactsuccess/contactsuccess.html">Contact Success</a></li>
<li class="nav_item15"><a href= "../contactfailure/contactfail.html">Contact Failure</a></li>
<li class="nav_item16"><a href= "../aboutus/aboutus.html">About Us</a></li>
</ul>
</nav>
</div>
</section>
</div>
</section>
<section>
<h1>Nothing</h1>
</section>
<section>
<div id="Picture">
<img src = "../assets/images/Bog/BogSnork.jpg" alt = "nice pic!" class = center>
</div>
</section>
<section>
<div id="Content">
<h3> Bog Snorkelling </h3>
<br>
<p>Ever wanted to be the fastest at bog snorkelling? Well now you can with our new exciting Bog Snorkeller's course!</p>
<br>
<p>Bog Snorkelling is a Welsh idea conceived in the Neuadd Arms pub in Llawrtyd Wells whereby competitiors snorkel in a 60 foot cold and murky mud bog in order to get the record time without using traditional swimming strokes. </p>
<br>
<p>Our Bog measures 80 feet which is the perfect size to challenge our would be bog champions! Remember to bring your own wetsuit, flippers, snorkel mask, cloth and towels and we'll provide the buckets of clean water! </p>
<br>
<p>Our Prices start from as little as £2.00 (off peak daily sessions) or £10 (weekly sessions) or £50 (monthly sessions).</p>
</div>
</section>
<div id = "Prices1of3">
<section>
<h3>£2</h3>
</section>
</div>
<div id = "Prices2of3">
<section>
<h3>£5</h3>
</div>
</section>
<div id = "Prices3of3">
<section>
</h3>£10</h3>
</div>
</section>
<p></p>
<div id="footer">
<footer>
<p>©Webberbridge Sports Hall</p> <p>Contact us: <a href = "mailto:info@webberbridgesports.mail"> info@webberbridgesports.mail</a></p>
</footer>
</div>
</body>
</html>