Content of the website goes beside the toolbar instead of below - html

Question

I am trying to follow a tutorial on YouTube to create a toolbar, but I am using Vuejs instead of regular HTML like on the video and the content of the views (.vue files) goes beside the toolbar instead of below it and another thing, I try to make center the toolbar.
<template>
<div id="app">
<div class="toolbar">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>
<a href>Our Team</a>
</li>
<li>
<a href>Camp Sites</a>
</li>
<li>
<a href>Mission & Vision</a>
</li>
<li>
<a href>Resources</a>
</li>
</ul>
</li>
<li>
Things to do
<ul>
<li>
<a href>Activities</a>
</li>
<li>
<a href>Parks</a>
</li>
<li>
<a href>Shops</a>
</li>
<li>
<a href>Events</a>
</li>
</ul>
</li>
<li>
Contact
<ul>
<li>
<a href>Map</a>
</li>
<li>
<a href>Directions</a>
</li>
</ul>
</li>
<li>
News
</li>
</ul>
</div>
<div>
<router-view/>
</div>
</div>
</template>
#app {
margin: 0;
padding: 0;
}
body {
background-color: black;
background-size: none;
margin-left: 10%;
}
.toolbar ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
.toolbar ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: 0.8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.toolbar ul li a {
text-decoration: none;
color: white;
display: block;
}
.toolbar ul li a:hover {
background-color: green;
}
.toolbar ul li ul li {
display: none;
}
.toolbar ul li:hover ul li {
display: block;
}
Whatever what I tried today, either the view was correctly below the toolbar but then the submenus were unclickable, or the views were below and centered but with a big margin-top to make the menu clickable or just beside the toolbar.
I am trying to replicate this kind of toolbar with the views right below it.

Answer 1

I guess the problem is 'float'. You will need a div with clear:both style after the toolbar and before the div containing router-view.
...
div class="toolbar"
...
/div
div style="clear:both"/
div
router-view
...