How to get this div onto a new line - html

Question

How do I get ARC onto its own line? I put them both in the same div to share a background, but I am having trouble separating the two. My menu bar is perfectly centered until I put in "ARC".
.header{
background-image: url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 80vh;
display: flex;
width: 100%;
}
.header ul li{
float: left;
color: white;
list-style: none;
padding: 7px 6px;
margin: 0;
text-align: center;
font-size: 15px;
display: flex;
}
.menu{
width: 100%;
text-align: center;
display: block;
justify-content: center;
margin: 0 auto;
padding: 0;
}
<div class="header">
<ul class="menu">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>Contact</li>
</ul>
<br>
<div class="title">
<h1>ARC</h1>
</div>
</div>

Answer 1

I would change the HTML
from this:
<div class="header">
<ul class="menu">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>Contact</li>
</ul>
<br>
<div class="title">
<h1>ARC</h1>
</div>
</div>
To this (solution):
<div class="header">
<div id="navbar-wrapper">
<ul class="menu">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1>ARC</h1>
</div>
</div>
Conclusion: it is better to use for example a div tag to make a new line than br tag as you gain much more control over your page setup and it is easier to style.
Keep on good work!

Answer 2

Since your li is float left they will be one next to the other.
add clear:left to the element and it will work.
.header ul li{
float: left;
clear: right;
...
}
clear
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.
The clear property applies to both floating and non-floating elements.

Answer 3

Just applied some of the CSS styles to only the links and that worked. Hope this helps!
.header{
background-image: url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 80vh;
width: 100%;
}
.header ul li{
float: left;
color: white;
list-style: none;
padding: 7px 6px;
margin: 0;
font-size: 15px;
}
.menu{
text-align: center;
width: 100%;
text-align: center;
display: flex;
justify-content: center;
margin: 0 auto;
padding: 0;
}
<div class="header">
<ul class="menu">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>Contact</li>
</ul>
<br>
<div class="title">
<h1>ARC</h1>
</div>
</div>