I am creating a top bar where I just want a menu icon in the left, the page title next to it and I will add a search bar in the right side but I will do that later.

I followed w3schools guide to create a collapsed sidebar and it works but I would like to achieve two more things:

* The menu icon is smaller than the bar itself where it is positioned. I would like it to increase its size so it fills the bar.
* I want the page title to be displayed next to it but I am not able to achieve this no matter where I place the that contains it.

I am going to remove the sidepanel code as it is working and it does not have to do with my issue positioning the menu icon and the page title:

```css
#wrapper-header {
  color: white;
  font-size: 28px;
  float: left;
  width: 100%;
  height: 65px;
  background-color: #2E2D30;
}

#main-header {
  position: relative;
  width: 1200px;
  left: 50%;
  margin-left: -400px;
  height: auto;
}

.page-title {
  position: relative;
  margin-top: -35px;
  left: 150px;
}
```

```html
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="wrapper-header">
  <div id="main-header">
    <button class="openbtn" onclick="openNav()">&#9776;</button>
    <div class="page-title">Recientes</div>
  </div>
</div>
```