Issue with alignment: Safari browser on MacBook displaying Bootstrap buttons all the way to the right side of the screen

I recently viewed one of my websites on Safari and noticed that the buttons were being pushed to the far right of the screen (between 100-200%), causing unnecessary horizontal scrolling, while everything appeared as intended on Google Chrome. Here is a snippet of the code for reference:

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
        <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <meta content="width=device-width, initial-scale=1" name="viewport">

        <style>
                body {
                    background: linear-gradient(-15deg, #e77817 0%, #fff 20%, #fff 80%, #152d65 95%);
                }


            ::-webkit-scrollbar{
                width: 6px;
            }
            ::-webkit-scrollbar-track{
                border-radius: 4px;
            }
            ::-webkit-scrollbar-thumb{
                background: #152d65;
                border-radius: 4px;
            }
            ::-webkit-scrollbar-thumb:hover{
                background: #e77817;
            }

            #Logo{
                    width:27%;              
                    }                   
            h3{
                font-size:25px;
                font-weight:bold;
                font-family:'ElMessiri Regular', sans-serif;
                }
            
            .poly {
                margin-right: 2%;
                margin-top: 1%;
                width: 20%;
                font-size: 18px;
                font-family: "ElMessiri Regular";
            }

            
            #List {
                display: flex;
                justify-content: center;
            }
            a {
                text-decoration: none;
                color: white;
            }
            #plastic {
                background: #152d65;
            }
            #plastic:hover {
                color: #e77817;
            }
            #cares {
                background: #009534;
            }
            #cares:hover {
                color: #FFED00;
            }
            #medical {
                background: #e77817;
            }
            #medical:hover {
                color: #152d65;
            }
            
        </style>
    
    </head>
    
    <body>
        <center>
        <div id="Logo"> 
            <img src="Images/Logo.png" class="img-responsive" alt="aaaaaaa">    
        </div>      
        <div id="Company_Name">     
        <h3> ABC Pvt Ltd </h3>      
        </div>
        <br>        
        <div id="List" class="col-lg-12 container" style="height: 100%; width: 100%:">
            <a class="col-lg-2 poly btn"  id="plastic" href="aaa.html"><div>AAA</div></a>
            <a class="col-lg-2 poly btn"  id="cares" href="bbb.html"><div>BBB</div></a>
            <a class="col-lg-2 poly btn" id ="medical" href="ccc.html"><div>CCC</div></a>
            
        </div>
        </center>

This issue was specifically detected on Safari Browser on MacOS. Interestingly, the website functions properly on iPhones. The problem seems to only affect the button placement, pushing them to the extreme right of the screen while all other elements remain unaffected.

Answer №1

After removing the display: flex and col-lg-* properties from the code, I tested it and found that it now functions correctly on Safari for MacBook and Chrome browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to toggle visibility of child elements in an HTML template using Angular 4+

I'm currently working on incorporating a basic "hover over a comment to display a reply button" feature in my angular application. Is it possible to create this effect using template reference variables exclusively? Something like this... <mat-l ...

When you hover over a Wordpress page, the entire text on the page will be underlined

Currently designing my own website using WordPress with the Elementor free plugin and Phlox theme. I've made some progress by completing a few sections which include text, buttons, and images. However, I'm encountering an issue where all the text ...

One way to create dynamic function parameters in JavaScript is by using

Currently, I am in the process of implementing a payment API checkout feature on my order.html page. However, I have encountered an issue where I need to add a script in the head of the HTML document. This script requires me to specify the subtotal amoun ...

Showing a JSON data as HTML content within a div element

How can I retrieve information from a tag within a list using dot notation? Both backend and frontend are written in Javascript.</p> <p>Here is the HTML code:</p> <pre><code><div>{{ GameData }}</div> </pre> ...

How can I make Material UI's grid spacing function properly in React?

I've been utilizing Material UI's Grid for my layout design. While the columns and rows are functioning properly, I've encountered an issue with the spacing attribute not working as expected. To import Grid, I have used the following code: ...

Challenging design with CSS shapes

Can this specific shape be created using just one HTML element? I am looking to use it for image cropping purposes, so having only one element would make the process easier ...

What is the process for adding a box shadow beneath my header?

I am currently attempting to add a box shadow under my header, similar to the design featured in the project mockup at https://github.com/RaghavMangrola/the-brighton-times. After trying to implement the following CSS property and value: .header { ...

How does the <link type=“”> affect your document?

I understand that this tag specifies the file type you are linking to (usually "text/css") for . But what is the reason behind including this information? ...

Lean/Tilt just the lower portion of the division

I have been experimenting with adding a unique slant to the bottom of a div. Progress has been made, as shown in the example below where I successfully applied the slant to some elements on the page. Currently, the slant is visible on both the top and bot ...

Switching the theme color from drab grey to vibrant blue

How can I change the default placeholder color in md-input-container from grey to Material Blue? I have followed the instructions in the documentation and created my own theme, but none of the code snippets seems to work. What am I doing wrong? mainApp. ...

HTML: The art of aligning elements within a header

I've been working on creating my personal HTML record, but I'm facing one last challenge that I can't seem to overcome. I want to design my header like this: https://i.stack.imgur.com/FU8EJ.png With the following elements: TEXT SUMMARY wi ...

No matter what I attempt, Ng-options is still failing to work properly

This is my custom selection element: <select ng-options="country.country for country in countries" formControlName="country"></select></label> Below is the TypeScript component code associated with it: import { Component } from ' ...

The <Span> element appears as bold in Internet Explorer when placed inside a table, whereas it appears as regular text in Google

I've successfully coded 5 dabbles, utilizing divs for precise positioning. Upon inspection in Chrome and IE, I noticed that the text appears bold in IE, unlike Chrome where it looks normal. To address this difference, I incorporated the <span> a ...

Avoid clicking in areas outside the perimeter of the blue circle in the SVG

Is there a way to restrict clicking outside the blue circle? The goal is to only allow opening by clicking on the svg itself, This includes everything, even white space inside the svg. How can this be achieved in the code? The current behavior is that ...

Looking to create a form that automatically updates the second dropdown list when I make a selection in the main dropdown menu

<div> <label for="form-field-select-3">State : </label> <br /> <select class="chosen-select form-control" id="State" n ...

When using the Column width property in React Material UI, it may not automatically expand

I've been playing around with React Material UI Tables and I'm having trouble making the columns auto-expand without wrapping. I tried setting the 'width: auto' property in the <Table size="small" style={{ width: auto}}> ...

Group a set of x elements together within a div, and then group a distinct number of elements together after every x-grouping

Is there a way to achieve a looping structure like this? For instance: Group every 2 divs into a new div, then (after every 2nd grouping) group every 3 divs together <div id="container"> <div></div> <div></div> ... </div& ...

Operating on a MacOS platform, the combination of Visual Studio 2019 with the Typescript and Sass

Currently, I'm facing a challenge with compiling my TypeScript to Javascript and Scss to css in Visual Studio 2019 (MVC .Net Core). Every compiler I've tried seems to be failing. Is there anyone out there who knows the process for accomplishing t ...

React Component for Toggling a Click Event on a Select Tag

I'm currently developing a react app where clicking on a specific text triggers the display of a select tag with several items. However, I've encountered two issues: Upon clicking the text, the select tag appears on ALL list items instead of ju ...

Why isn't my object updating its position when I input a new value?

<hmtl> <head> <!--<script src='main.js'></script>--> </head> <body> <canvas id='myCanvas'> </canvas> <script> function shape(x,y){ this.x=x; this.y=y; var canvas = document.get ...