Links and images menu with float

Question

I tried to create a menu with html and css without any framework, I used float:left to place the image with the logo on the left and rest of the images that are anchors should be on the right but when using float:right could help me identify the problem?

Obs.: Doesn’t have to be with float is that this was the way I tried. It is worth remembering that the menu accompanies the scroll of the site.

Below is the code I tried:

#wrap {
  width:calc(100% - 1px);
}

body {
  font-family: 'Open Sans';
  padding:0;
  margin:0;
}

body a {
  text-decoration:none;
}

body img {
  border: none;
}

.menu {
  position: fixed;
  top: 0;
  height: 80px;
  z-index: 1000;
  background-color: #f2f2f2;
}

.menu img {
  float:left;
  margin: 15px 0px 0px 20px;
  height: 70%;
}

.menu .menu-link {
  float:right;
}


.menu .menu-link a {
  line-height: 100px;
  color: #00497e;
  text-transform:uppercase;
  font-size: 11pt;
}

.menu .menu-link a:hover {
  border: 0;
  background-color: #e20613;
  color: white;
}

<div id="wrap">
  <div class="menu">
    <a href="#">
      <img alt="Logo" src="http://inpartsaudebi.com.br/assets/img/brand-inpart.png">
    </a> 
    <div class="menu-link">
      <a href="#about" id="menuAbout">
        <img src="https://static.dentaldepartures.com/places/fa-building-o.png" style="width:5%;" />
        Empresa
      </a>
      <a href="#users" id="menuUser">
        <img src="http://alumnes.org/wp-content/uploads/2017/06/fa-user-circle-o-c0a2bd7a.png" style="width:5%;" />
        Usuário
      </a>
    </div>
  </div>
</div>

My goal was something similar to this:

Answer 1

Caique your code is very messy rss, so I made a very basic model with some measurements in PX same and with Flexbox to you have an idea.

html, body {
  font-family: 'Open Sans';
  padding:0;
  margin:0;
  width: 100%;
}

.menu {
    height: 80px;
    width: 100%;
    background-color: #666;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
}
img {
    max-height: 60px;
}
.logo {
    background-color: red;
    height: auto;
    width: 200px;
    padding: 10px;
    box-sizing: border-box;
}
.direita {
    display: flex;
}
.item {
    background-color: blue;
    margin: 0 10px;
    box-sizing: border-box;
    padding: 10px;

}
.item a {
    color: #fff;
    line-height: 80px;
    align-self: center;
}

<div class="menu">
    <div class="logo">
        <a href="#">
            <img alt="Logo" src="http://inpartsaudebi.com.br/assets/img/brand-inpart.png">
        </a>
    </div>
    <div class="direita">
        <div class="item">
            <a href="#about" id="menuAbout">
                <img src="https://static.dentaldepartures.com/places/fa-building-o.png" /> Empresa
            </a>
        </div>
        <div class="item">
            <a href="#users" id="menuUser">
                <img src="http://alumnes.org/wp-content/uploads/2017/06/fa-user-circle-o-c0a2bd7a.png" /> Usuário
            </a>
        </div>
    </div>
</div>

Give a studied in the code you will see that is very quiet and works better than Float.

Now a model with Float:Left and Float:Right for you to understand the concept better since it was your first option

Have it displayed on the full screen not to appear buged in the execution of the snippet

html, body {
  font-family: 'Open Sans';
  padding:0;
  margin:0;
  width: 100%;
  height: 100%;
}
.menu {
    height: 80px;
    width: 100%;
    background-color: #666;
    position: fixed;
    top: 0;
}
.logo {
    float: left;
}
.logo a img {
    max-width: 30%;
    height: auto;
    margin: 10px;
}
.item {
    float: right;
    display: inline-block;
    margin: 15px;
}
.conteudo {
    margin-top: 80px;
    height: 1000pxpx;
}

<div class="menu">
    <div class="logo">
        <a href="#">
            <img alt="Logo" src="http://inpartsaudebi.com.br/assets/img/brand-inpart.png">
        </a>
    </div>
    <div class="direita">
        <div class="item">
            <a href="#about" id="menuAbout">
                <img src="http://placecage.com/50/50" /> Empresa
            </a>
        </div>
        <div class="item">
            <a href="#users" id="menuUser">
                <img src="http://placecage.com/50/50" /> Usuário
            </a>
        </div>
    </div>
</div>
<div class="conteudo">
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
</div>

Very simple model too, for educational purposes only