0

I'm trying to make a navbar with a button and an icon of an hamburger menu. I put both divs inline but they risulted disaligned vertically. I can't find the mistake. What did I do wrong? 

html, body{
     padding: 0;
     margin: 0;
        }
   .riga{
     display: block;
     }
  .bg_grigio{
      background-color: gray;
         }
  .testo_a_destra{
      text-align: right;
       }
  .pulsante{
      border-radius: 20px;
      padding: 10px;
      text-align: center;
     }
 .verde_vuoto{
     border: 2px solid #0a5537;
     background-color: inherit;
     }
 .div_inlinea{
     display: inline;
     margin-left: 40px;
    }
 .icona img{
    width: 4%;
    }
 #riga_logo{
    padding-top: 20px;
    padding-right: 20px;
    height: 50px;
}
<div id="riga_logo" class="riga bg_grigio">
  <div class="testo_a_destra">
    <div class="pulsante verde_vuoto div_inlinea">Order Benugo Delivery</div>
    <div class="icona div_inlinea"><img src="Images/menu.png" alt="menu_icon" /></div>
  </div>
</div>

enter image description here

s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
Cicciop
  • 9
  • 1
  • for one I would use flex-box here. for two its hard to tell because in your example image is missing, and from your screenshot it seems that image is higher than nav bar causing this. Try adding specific height to img css. – toHo Dec 01 '20 at 10:05
  • They are aligned, https://snipboard.io/zgZlwq.jpg – pavel Dec 01 '20 at 10:07
  • Thank you very much guys! I tried to use flexbox and I tried also to add specific height to the img and now they are aligned. – Cicciop Dec 02 '20 at 08:21

0 Answers0