How to center an image in navbar

Question

so i would like to center my logo inside my nav bar as seen in the attached image but for some reason it doesnt quite work please help me

the css

@font-face {
  font-family: "Metropolis";
  src: url('../fonts/metropolis.otf') format('opentype');
}

body {
  background-color: #cfd8dc;
}

.nav {
  height: 140px;
  background-color: #1a237e;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.nav li {
  display: inline-block;
}

#logo {
  height: 195px;
  width: 195px;
  margin: 0 auto;
  display: block;
  position: static;
  z-index: 100000;
}

.logo {
  width: 195px;
  height: 195px;
  border-radius: 50%;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.navitem {
  font-size: 24px;
  color: #c5cae9;
  font-family: Verdana, Geneva, sans-serif;
  padding: 60px 15px !important;
  display: inline-block !important;
  background-color: transparent !important;
}

.icon {
  height: 16px;
  width: 16px;
  margin-left: 45px;
  margin-bottom: 7px;
  padding: 0 !important;
}

.nav li:hover {
  border-bottom: 2px solid #ff5722;
  background-color: none;
  height: 140px;
  width: initial;
}

.nav a:hover {
  color: #c5cae9;
}

h1 {
  font-size: 48px;
  margin-left: 62px;
  font-family: Metropolis, sans-serif;
  position: absolute;
  color: #ff5722;
}

#banner {
  width: 100%;
  margin-bottom: 100px;
}

.artiekel {
  background-color: #e3f2fd;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.artiekelhead {
  text-align: center;
  font-family: Metropolis, sans-serif;
  font-size: 48px;
  color: #ff5722;
  background-color: #1a237e;
  height: 105px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.artiekeltext {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  color: #5c6bc0;
}

.artiekeldiv {
  margin: 0;
}

hr {
  border-top: 2px solid #ff5722;
}

.artiekeltext a {}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style/style.css">
  <link rel="icon" type="image/png" href="images/favicon.png" />



  <div class="containter">
    <div class="row">
      <ul class="col-md-12 nav">
        <li><img class="icon" src="images/home.svg"><a class="navitem" href="index.php">Home</a></li>
        <li><img class="icon" src="images/presentatie.svg"><a class="navitem" href="presentatie.php">Presentatie</a></li>
        <img id="logo" class="logo" href="index.php" src="images/Logo.svg">
      </ul>
    </div>
    <div class="row">
      <h1>Home</h1>
      <img id="banner" class="img-responsive" src="images/banner1.jpg">
    </div>
    <div class="row artiekeldiv">
      <div class="col-md-6">
        <div class="artiekelhead">
          Welkom
        </div>
        <div class="artiekeltext artiekel">
          <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley fire
            in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black jack
            bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
          <hr>
          <a href="#">
							Lees Meer »
						</a>
        </div>
      </div>
      <div class="row artiekeldiv">
        <div class="col-md-6">
          <div class="artiekelhead">
            info
          </div>
          <div class="artiekeltext artiekel">
            <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley
              fire in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black
              jack bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
            <hr>
            <a href="#">
						Lees Meer »
					</a>
          </div>
        </div>
      </div>
    </div>
  </div>

and also the image i want to create but can't this is some kind of mock-up/wire frame of the page i'm making

Answer 1

move the logo element up and use the following: use position: absolute; so you can control the position with left: calc((100% - 195px) / 2);

#logo {
  height: 195px;
  width: 195px;
  margin: 0 auto;
  display: block;
  position: absolute;
  left: calc((100% - 195px) / 2);
  z-index: 100000;
}

How to use position?

1. Static. Work with the standard document flow.

2. Floats. Float containers or elements (and always clear floats).

3. Out of Flow Positioning. Use absolute or fixed positioning to remove elements from the flow.

ref: https://teamtreehouse.com/community/when-do-i-use-absolute-positioning-and-when-do-i-use-relative-positioning

@font-face {
  font-family: "Metropolis";
  src: url('../fonts/metropolis.otf') format('opentype');
}

body {
  background-color: #cfd8dc;
}

.nav {
  height: 140px;
  background-color: #1a237e;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.nav li {
  display: inline-block;
}

#logo {
  height: 195px;
  width: 195px;
  margin: 0 auto;
  display: block;
  position: absolute;
  left: calc((100% - 195px) / 2);
  z-index: 100000;
}

.logo {
  width: 195px;
  height: 195px;
  border-radius: 50%;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.navitem {
  font-size: 24px;
  color: #c5cae9;
  font-family: Verdana, Geneva, sans-serif;
  padding: 60px 15px !important;
  display: inline-block !important;
  background-color: transparent !important;
}

.icon {
  height: 16px;
  width: 16px;
  margin-left: 45px;
  margin-bottom: 7px;
  padding: 0 !important;
}

.nav li:hover {
  border-bottom: 2px solid #ff5722;
  background-color: none;
  height: 140px;
  width: initial;
}

.nav a:hover {
  color: #c5cae9;
}

h1 {
  font-size: 48px;
  margin-left: 62px;
  font-family: Metropolis, sans-serif;
  position: absolute;
  color: #ff5722;
}

#banner {
  width: 100%;
  margin-bottom: 100px;
}

.artiekel {
  background-color: #e3f2fd;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.artiekelhead {
  text-align: center;
  font-family: Metropolis, sans-serif;
  font-size: 48px;
  color: #ff5722;
  background-color: #1a237e;
  height: 105px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

.artiekeltext {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  color: #5c6bc0;
}

.artiekeldiv {
  margin: 0;
}

hr {
  border-top: 2px solid #ff5722;
}

.artiekeltext a {}

<!doctype html>
<html lang "nl">

<head>
  <meta charset="utf-8">
  <meta name="description" content="voorbeeld paginna">
  <meta name="keywords" content="HTML code">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="author" content="Michael Rotteveel">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home | Math-Mate</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style/style.css">
  <link rel="icon" type="image/png" href="images/favicon.png" />
</head>

<body>
  <div class="containter">
    <img id="logo" class="logo" href="index.php" src="http://placehold.it/150x150">
    <div class="row">
      <ul class="col-md-12 nav">
        <li><img class="icon" src="images/home.svg"><a class="navitem" href="index.php">Home</a></li>
        <li><img class="icon" src="images/presentatie.svg"><a class="navitem" href="presentatie.php">Presentatie</a></li>

      </ul>
    </div>
    <div class="row">
      <h1>Home</h1>
      <img id="banner" class="img-responsive" src="images/banner1.jpg">
    </div>
    <div class="row artiekeldiv">
      <div class="col-md-6">
        <div class="artiekelhead">
          Welkom
        </div>
        <div class="artiekeltext artiekel">
          <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley fire
            in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black jack
            bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
          <hr>
          <a href="#">
							Lees Meer »
						</a>
        </div>
      </div>
      <div class="col-md-6">
        <div class="artiekelhead">
          Welkom
        </div>
        <div class="artiekeltext artiekel">
          <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley fire
            in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black jack
            bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
          <hr>
          <a href="#">
							Lees Meer »
						</a>
        </div>
      </div>
    </div>
    <div class="row artiekeldiv">
    <div class="col-md-6">
        <div class="artiekelhead">
          info
        </div>
        <div class="artiekeltext artiekel">
          <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley fire
            in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black jack
            bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
          <hr>
          <a href="#">
						Lees Meer »
					</a>
        </div>
      </div>
      <div class="col-md-6">
        <div class="artiekelhead">
          info
        </div>
        <div class="artiekeltext artiekel">
          <p>Yar Pirate Ipsum Case shot tack cable gabion parley stern bring a spring upon her cable topmast grog matey. American Main grog blossom scallywag killick careen Sink me pirate port loaded to the gunwalls wherry. Mizzen aft nipperkin parley fire
            in the hole red ensign grapple coxswain bucko topsail. Wherry bounty rope's end topmast draught heave down log bucko chase lad. Capstan long clothes piracy smartly aye mutiny grapple handsomely deadlights Jack Ketch. Jack Ketch black jack
            bowsprit boom grapple jack aft Letter of Marque lee poop deck.</p>
          <hr>
          <a href="#">
						Lees Meer »
					</a>
        </div>
      </div>
    </div>
  </div>
</body>