避免使用float： p>

HTML

 < div class =nav-wrapper> 
< div class =nav> 
< img src =https://t4.ftcdn.net/jpg/00/91/61/81/240_F_91618179_eR79OdR87jR9fp9S3aaiJGz4aGqkkwuE.jpg/> 
< div class =button_desktop_01> 1.0主菜单< / div> 
< div class =button_desktop_01> 2.0主菜单< / div> 
< / div> 
< / div> 
 

CSS

  .nav-wrapper，.nav {
 width：100％; 
} 

 .nav-wrapper，
 .nav> img {
 height：30px; 
} 

 .nav {
 position：fixed; 
背景颜色：＃f3f5f6; 
} 

 .nav> * {
 display：inline; 
 padding：4px; 
 box-sizing：border-box; 
 margin：2px; 
} 
 

https://jsfiddle.net/kbvwpo76/4/

Please find my code here: https://jsfiddle.net/kbvwpo76/2/

I want to put an image on the left side of the fixed navigation on the top of the page. In the link above you can find an example with some random content.

My issue now is that the image is behind the nagivation and it does not push the navigation to the right altough everything is float:left;

What do I have to change in my code to get the image and the navigation in one line?

Avoid using float:

HTML

<div class="nav-wrapper">
  <div class="nav">
    <img src="https://t4.ftcdn.net/jpg/00/91/61/81/240_F_91618179_eR79OdR87jR9fp9S3aaiJGz4aGqkkwuE.jpg" />
    <div class="button_desktop_01">1.0 Main Menu </div>
    <div class="button_desktop_01">2.0 Main Menu </div>  
  </div>
</div>

CSS

  .nav-wrapper, .nav {
    width: 100%;
  }

  .nav-wrapper,
  .nav > img {
     height: 30px;
  }

  .nav {
    position: fixed;
    background-color: #f3f5f6;
  }

  .nav > * {
    display: inline;
    padding: 4px;
    box-sizing: border-box;
    margin: 2px;
  }

https://jsfiddle.net/kbvwpo76/4/