Okay after a lot of googling I finally found out how to centre the menu links in the middle of the nav bar. After that I came across another problem...adding a logo in the navigation bar.
My problem is, the logo doesn't come into the navigation bar, it instead goes above the bar. 
I would like to have the logo floating to the left in the nav bar.
I have tried a few things, including adding `display: inline-block/inline` to all the main elements, but no difference. Though I tried adding `display: inline` to the `nav ul`, but the background of the nav bar disappears (see second image) and I can't add a background via adding height and width. 

P.s Excuse me If there are few amateur mistakes, I have only started to code a few months ago.

Thanks for your time!

How the nav bar looks now:

[![enter image description here](https://i.stack.imgur.com/k0hzM.png)](https://i.stack.imgur.com/k0hzM.png)

How the nav bar looks with `display: inline;`

[![enter image description here](https://i.stack.imgur.com/tWM9e.png)](https://i.stack.imgur.com/tWM9e.png)

Here is my HTML and CSS:

```css
#logo {
  height: 50px;
  width: auto;
  float: left;
}
nav ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #1a1a1a;
  text-align: center;
  border: 1px solid #e7e7e7;
  display: inline-block;
  width: 100%;
}
nav li {
  display: inline-block;
}
nav a {
  display: inline-block;
  padding: 16px 15px;
  text-decoration: none;
  font-family: arial;
  font-weight: bold;
  color: white;
}
nav a:hover {
  background-color: orange;
  color: white;
}
```

```html
<nav>
  <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"></img>
  <ul>
    <li><a href="">Game 1</a>
    </li>
    <li><a href="">Game 2</a>
    </li>
    <li><a href="">Game 3</a>
    </li>
  </ul>
</nav>
```