Position CSS menu

Question

I need help to position my hamburger menu. I want it to the right corner with margin-top and padding-right as the CSS below.

I don't work with float, what do I need to use? :)

Please help a student.

.header_container { 
   width: 100%
 }


.hamburger_menu {
    margin-top: 37px;
 /*  padding-right: 30px;  */
}

 
 .header_logo {
   background-color: lightgray;
   width: 280px;
   text-align: center;
   margin-top:70px;
   margin-bottom: 100px;
   margin-left: auto;
   margin-right: auto; 
 }

.header_text {
   text-align: center;
   margin-top:26px;
   margin-bottom:46px;
}

<div class="header_container">

 <div class="hamburger_menu"> 
      Hamburger menu
 </div> 
  
 <div class="header_logo">
      LOGO
 </div>
  
 <div class="header_text">
      Text
 </div>
     
</div>

looks like your menus is a simple div... so you can move the words right with text-align: right — Chris Li, Sep 17 '18 at 11:06
did you try to do like this check this https://codepen.io/udarakasun/pen/LJgEwN — Udara Kasun, Sep 17 '18 at 11:13

Gurmatpal · Answer 1 · 2018-09-17T11:31:11.337

1

To resolve the problem, instead of float:left, use:

.hamburger_menu{float:right;}

edited Sep 17 '18 at 11:31

answered Sep 17 '18 at 11:09

Gurmatpal

134
8

score 0 · Accepted Answer · answered Sep 17 '18 at 11:07

0

Use text-align:right; for the menu.

answered Sep 17 '18 at 11:07

GuyML

257
2
10

Position CSS menu

2 Answers2