Navigation and title won't center - html

Question

I'm so new to coding and for school we need to code a website. Right now I'm slowly rolling into it, but I can't get my navigation and title to center. On my 13 inch laptop it all looks fine, but on a bigger pc it isn't centered anymore.
This is the link to the website, it's a mess right now: http://st358373.cmd16c.cmi.hanze.nl/portfolio.html
Updated question:
How do I get my title and subtitle centered?
HTML code:
<div class="titel">Portfolio</div>
<div class="subtitel">Hier is een selectie van recentelijk werk.</div>
CSS:
.titel {
font-family: Raleway;
font-size: 52px;
color: #3b3d40;
text-align: center;
font-weight: 700;
margin-top: 20px;
}
.subtitel {
font-family: Adobe Caslon Pro;
font-size: 18px;
text-align: center;
margin-top: 40px;
margin-bottom: 50px;
}

Answer 1

One way would be:
ul.topnav li {
/* float: left; Remove this. */
display: inline-block;
}
ul.topnav {
text-align: center;
}
.titel {
font-family: Raleway;
font-size: 52px;
color: #3b3d40;
font-weight: 700;
text-align: center;
margin-top: 20px;
width: 100%;
}
ul.topnav {
list-style-type: none;
margin: 0;
overflow: hidden;
font-family: Raleway;
font-weight: 500;
/* float: center; */
text-align: center;
position: center center;
}
ul.topnav li {
/* float: left; */
display: inline-block;
}
ul.topnav li a {
display: inline-block;
color: #3b3d40;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 10px;
letter-spacing: 2px;
}
ul.topnav li a:hover {
background-color: #555;
}
ul.topnav li.icon {
display: none;
}
<ul class="topnav" id="myTopnav">
<li>HOME
</li>
<li>PORTFOLIO
<div style="margin-top:-12px;border-bottom:1px solid #3b3d40;height:1px;"></div>
</li>
<li>BLOG
</li>
<li>PROJECTEN
</li>
<li>ONTWERPPROCES
</li>
<li>VERANTWOORDING
</li>
<li>OVER
</li>
<li>CONTACT
</li>
<li class="icon">
☰
</li>
</ul>
<div class="titel">Portfolio</div>

Answer 2

Use flex. The invisible item and the right div should have same width. You can add some content in invisible div and remove visibility:hidden;
.header{
height:60px;
background-color:green;
display:flex;
flex-direction:row;
align-items:center;
}
.header>div:first-child {
margin-right: auto;
visibility: hidden;
width:100px;
}
.header .navigation{
height:50px;
margin:0;
text-align:center;
color:white;
}
.header .right{
margin:0;
padding:0;
margin-left:auto;
width:100px;
}
.header .right img{
width:30px;
margin:0 5px;float:right;
}
<div class="header">
<div>invisible</div>
<div class="navigation">Navigation Bar</div>
<div class="right">
<img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img src="http://images.financialexpress.com/2015/12/Lead-image.jpg"/>
</div>
</div>