How to i keep my logo from overlapping on to my main menu bar when i open on an tablet

For some reason when ever i open my web page on a table the logo increase size and covers the links in my main menu bar.

here is my source code and css..

      <div class="container">

           <div class="logo"><a class="brand" href="index.html"><img src="../Website/SCM Logo.png" alt="optional logo">               </div>

           <div id="mainmenu" class="menu_container">
                <label class="mobile_collapser">MENU</label>
                <!-- Mobile menu title -->
                <ul>
                     <li class="active"><a href="index.html"></a></li>
                     <!-- Must create links here -->
                     <li><a href="About Us.html">Mechanical</a></li>
                     <li><a href="services.html">Electrical</a></li>
                     <li><a href="portfolio.html">Communication</a></li>
                     <li><a href="contact.html">Contact</a></li>

                </ul>
           </div>
           <div class="triangle-up-left"></div>
           <div class="triangle-up-right"></div>
      </div>
 </header>

Solution

You can try specifying a percentage size for you logo ex(style="max-height:50%; max-width:50%"). This will allow it to scale to different devices, and hopefully it will stop covering your main menu