I'm working on header section where there are 3 spans, one floating to the left, one floating to the right and the other span in the middle. The middle span is not getting horizontally aligned no matter what.

```css
body{
  font-family: Myriad Set Pro;
  margin: 0;
}

/* ===================== Header Section =============================*/
#header{
  width: 100%;
  position: fixed;
  height: 75px;
  line-height: 75px;
  box-shadow: 5px 5px 5px #edeff2;
  text-align: center;
}

#position{
  float: right;
  margin-right: 10px;
  /*width: 20px;*/
  /*margin-top: -75px;*/
}

#logo{
  float: left;
  height: inherit;
}

#logo:hover{
  cursor: pointer;
}

#name{
  border: 1px solid black;
  position: absolute;
  margin: 0px auto;
}
```

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dash Html</title>
    <link rel="stylesheet" type="text/css" href="dash.css">
  </head>
  <body>

    <div id="header">
      <a href="https://www.google.com" target="_blank">
        <img src="abc.png" id="logo">
      </a>
      <span id="position"> Developer Developer </span>
      <span id="name">SKSV</span>

    </div>

  </body>
</html>
```