css - Position to the right when it's float to the left -

I have a menu and a logo on the header, and I am struggling to stay on the far side of the logo I'm on the left side of the website and on the right side menu.

The problem is, when both of them are displayed as inline-block, which means they are going to float the default orientation, I can not understand a way to change it, help please .

Here is the CSS code:

  / * header * /. WrapperHeader {background-color: #FFFFFF; Border Bottom: 1 Px Solid # DDDDDD; Width: 100%; Padding: 15px 0 pixels; Z-index: 1000; }. Content {width: 1000px; Max-width: 100%; Margins: Auto; } .header-logo, #logoImage {width: 250px; Max-width: 100%; Display: Inline-block; Vertical-row: middle; } / * Main Menu * / .header-menu {width: 690px; Max-width: 100%; Display: Inline-block; Vertical-row: middle; } #MainMenu li {Status: Relative; Padding: 15px; Display: Inline-block; Correct: 0 pixels; }  Note:  In HTML, the logo is in a section and the menu is in Aether section and both of these are in a single divide  
 HTML code:  
  & lt; Header & gt; & Lt; Div class = "wrapperHeader" & gt; & Lt; Div class = "content" & gt; & Lt; Section class = "header-logo" & gt; & Lt; A href = "index.html" & gt; & Lt; Img id = "logoImage" src = "property / element / logo.png" alt = "LOAI design studio logo" /> & Lt; / A & gt; & Lt; / Section & gt; & Lt; Section class = "header-menu" & gt; & Lt; Navigation ID = "Menmanu" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; One class = "active" href = "index.html" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "portfolio menu" & gt; & Lt; An id = "portfolio" href = "#" & gt; Portfolio & lt; / A & gt; & Lt; Ul class = "submenu" & gt; & Lt; Li & gt; & Lt; A href = "web-design html" & gt; Web Design & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "visual-iStimat" & gt; Visual identity & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "photography.html" & gt; Photography & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "testimonials.html" & gt; Testimonials & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "about.html" & gt; About me & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "contact.html" & gt; Get in touch & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "getStartedButton" href = "get-start-up html" & gt; Get started & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; A href = "#" id = "smartmanu" & gt; Menu & lt; P id = "smart menu-logo" & gt; LOAI Design Studio & lt; / P & gt; & Lt; / A & gt; & Lt; / Neo & gt; & Lt; / Section & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Header & gt; Here I have edited your CSS code so that you can try this < / P> 
  / * header * /. WrapperHeader {background-color: #FFFFFF; Border Bottom: 1 Px Solid # DDDDDD; Padding: 15px 0 pixels; Z-index: 1000; Hidden flurry; }. Content {width: 1000px; Margins: Auto; } .header-logo, #logoImage {width: 250px; Swim left; } / * Main Menu * / .header-menu {width: 690px; float right; } # Main Menu UL {margin: 0; Padding: 0; List style: none; } #MainMenu li {Status: Relative; Padding: 5px 15px; Swim left; List style: none; } Li # PortfolioMenu {padding: 0; } Li # Portfolio menu & gt; One padding: 5px 15px; } Ul.subMenu {display: none; Status: Completed; } Li: Hoover ul. Sub menu {display: block; }   
 I have  float: left for the logo; ,  Names: true;  for header menu, deleted  display: inline-block;  and made some other improvements ...  
 Hope this will help you ...