javascript - In safari browser all content images moving left

Question

I have the left side logo and the right side menu. in safari browser. logo and menu coming left side. I am using the uikit framework. please, anyone, help to solve this issue.

this is html

        <div class="clear-padd uk-width-auto@m">
            <div class="uk-container">
                
                <div class="uk-navbar">
                    <div class="menu-toggle">
                        <button class="uk-margin-small-right mobile-navbutton" uk-toggle="target: #offcanvas-usage">
                           <img src="https://img.icons8.com/ios-filled/50/000000/menu.png" alt="toggle" style="height: 27px; width: 27px;">
                        </button>
                    </div>
                    <div class="uk-flex uk-navbar-left logo-img">
                        <div class="uk-navbar-item  clear-padd brand-logo img"> 
                            <a href="http://altcommerce.com/">   
                                <picture>
                                    <source srcset="<?php echo $filePath;?>images/alt.webp" type="image/webp">
                                    <img class="image" src="<?php echo $filePath;?>images/alt.png" alt="ALT Logo">
                                </picture>
                            </a>
                        </div>
                    </div>

                    <div class="mobile-nav uk-navbar-right uk-width-expand@m">
            
                    <ul class="uk-navbar-nav uk-text-bold nav-menu">
                        <li class="">
                            <a class="<?php if($currentPage =='home'){echo 'active_page';}?>" href="<?php echo $filePath;?>">Home</a>
                        </li>
                        <li >
                            <a class="uk-button sub-menu <?php if($currentPage =='about'){echo 'active_page';}?>">ABOUT US</a>
                            <div id="about_submenu"  class="drop-navbar" style="display:none;"  uk-dropdown="pos:top-center">
                                
                                    <ul class="uk-nav uk-navbar-dropdown-nav drop-menu">
                                        <li class="sub"><a href="<?php echo $filePath;?>about">WHAT WE DO</a></li>
                                        <li class="sub"><a href="<?php echo $filePath;?>csr">COMMUNITY</a></li>
                                        <li class="sub"><a href="<?php echo $filePath;?>contactus">CONTACT US</a></li>
                                    </ul>
                              
                            </div>
                            
                        </li>
                        <li class="">
                            <a class="<?php if($currentPage =='skill'){echo 'active_page';}?>" href="<?php echo $filePath;?>skill">Skills</a>
                        </li>
                        <li >
                            <a class=" uk-button sub-menu <?php if($currentPage =='service'){echo 'active_page';}?>"style ="text-decoration: none;" href="<?php echo $filePath;?>service">Services</a>
                            <div id="service_submenu"  class="drop-navbar" style="display:none;"  uk-dropdown="pos:top-center">
                                <ul class="uk-nav uk-navbar-dropdown-nav drop-menu">
                                        <li class="sub"><a href="<?php echo $filePath;?>DCX">DCX</a></li>
                                        <li class="sub"><a href="<?php echo $filePath;?>product">PRODUCT ENGINEERING</a></li>
                                        <li class="sub"><a href="<?php echo $filePath;?>consulting">CONSULTING</a></li>
                                    </ul>
                             </div>       
                        </li>
                        <li >
                            <a class="<?php if($currentPage =='resource'){echo 'active_page';}?>" href="<?php echo $filePath;?>resource">Resources</a>
                        </li>
                        
                        <li >
                            <a class="<?php if($currentPage =='career'){echo 'active_page';}?>" href="<?php echo $filePath;?>careers">Careers</a>
                        </li>
                       
                    </ul>

                 </div>

                
            </div>

        </div>
    </div>

    </div>
</div>
     

Css

  .full-width-container 
    {
       background-color: #fff !important;
       width: 100%;
       max-width: 100%;
       padding: 0;
    }
   .nav-header
    {
       background-color: #fff !important;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.09);
       margin: 4px 14px !important;
   }

IN SAFARI ONLY ITS COMING LIKE THIS. IN OUR WEBSITE SOME IMAGES AND CONTENT ALSO COMING LIKE THIS. PLEASE, ANYONE, HELP TO SOLVE THIS ISSUE.

question from:https://stackoverflow.com/questions/65918004/in-safari-browser-all-content-images-moving-left

Answer 1

Waitting for answers