how to centre these 2 images

Since you're using Bootstrap, I wonder why you're not using Bootstrap for your navigation.

Image based navigation is a pain in the neck to maintain.   See link below for details.

Bootstrap Navigation Bar

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <ul class="nav navbar-nav">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Link</a></li>
       <li><a href="#">Link</a></li>
     </ul>
     <button class="btn btn-danger navbar-btn">Button</button>
   </div>
</nav>

You dont really need Bootstrap to do that. Just use the code below: (make sure the links to your images are correct)

<figure class="center-images">

<img src="images/200_size_buttons/red_home_flat.jpg" width="206" height="35" alt=""/>

<img src="images/200_size_buttons/red_contact_flat.jpg" width="206" height="35" alt=""/>

</figure>

<!-- end center-images -->

and the css:

.center-images {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

}

.center-images img {

margin: 0 10px;

}