I have an html page that loads index.css, which holds my styles. The page loads perfectly on safari, but chrome and firefox it messes everything up, and changes the positing of everything. I have never ran into this issue before, so not sure what's wrong. here is my css code for index.css:

    *, *:before, *:after {
    /* margin: 0;
    padding: 0; */

    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
div {
    /* margin: 0;
    padding: 0; */

    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

    .select {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 300px;
        border: 1px solid black;
        border-bottom: 1px solid black;

    }

    .col-25 {
        float: left;
        width: 25%;
        margin-top: 6px;
    }

    .col-75 {
        float: left;
        width: 75%;
        margin-top: 6px;
    }

    label {
        padding: 12px 12px 12px 0;
        display: inline-block;
        color: #000;
        font-size: 20px;
        font-weight: 900;
        display: inline-block;
        /* width: 140px; */
        text-align: right;
    }

    .inputt {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: inline-block;
        border: 1px solid black;
        border-bottom: 1px solid black;
        margin: 5px 10px 5px 0;
    }



    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* basic stylings ------------------------------------------ */
    body {
        background: url(https://scotch.io/wp-content/uploads/2014/07/61.jpg);
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .container {
        font-family: 'Roboto';
        width: 600px;
        display: block;
        background: #FFF;
        padding: 10px 50px 50px;
        margin-left: 80px;
    }

    .container2 {
        font-family: 'Roboto';
        display: block;
        background: #FFF;
        margin-left: 100px;
    }

    h2 {
        text-align: left;
        margin-left: 80px;
    }

    h2 small {
        font-weight: normal;
        color: #888;
        display: block;
    }

    .footer {
        text-align: center;
    }

    .footer a {
        color: #53B2C8;
    }

    /* form starting stylings ------------------------------- */
    .group {
        position: relative;
        margin-bottom: 45px;

    }


    input[type="text"] {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 300px;
        border: 1px solid black;
        border-bottom: 1px solid black;
    }

    input:focus {
        outline: none;
    }

    /* LABEL ======================================= */
    /* label                 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
} */

    /* active state */
    input:focus~label,
    input:valid~label {
        top: -20px;
        font-size: 14px;
        color: #5264AE;
    }

    /* BOTTOM BARS ================================= */
    .bar {
        position: relative;
        display: block;
        width: 300px;
    }

    .bar:before,
    .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #5264AE;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    .bar:before {
        left: 50%;
    }

    .bar:after {
        right: 50%;
    }

    /* active state */
    input:focus~.bar:before,
    input:focus~.bar:after {
        width: 50%;
    }

    /* HIGHLIGHTER ================================== */
    .highlight {
        position: absolute;
        height: 60%;
        width: 100px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: 0.5;
    }

    /* active state */
    input:focus~.highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    /* ANIMATIONS ================ */
    @-webkit-keyframes inputHighlighter {
        from {
            background: #5264AE;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    @-moz-keyframes inputHighlighter {
        from {
            background: #5264AE;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    @keyframes inputHighlighter {
        from {
            background: #5264AE;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    .responsive {
        width: 100%;
        height: auto;
    }

    * {
        box-sizing: box-content;
    }

    /*  */
    #page {
        max-width: 960px;
        margin: 0 auto;

    }

    .title {}

    .second-title {
        font-size: 1.2em;
    }

    .centered-text {
        /* text-align:center; */
    }

    nav ul {
        list-style-type: none;
    }

    nav ul li {
        display: inline;
        padding: 1rem;
        text-align: center;
    }

    .centered-text {}

    a:link {
        color: HSL(215, 56%, 67%);
        text-decoration: none;
    }

    a:hover {
        color: HSL(3, 61%, 67%);
    }

    .img-align-center {
        display: block;
        margin: 0 auto;
    }

    .body-text {
        font-size: 20px
    }

    .submit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        background-color: #fff;
        border: 2px solid black;
        color: black;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }

I am not sure what I am missing to be able to render on all browsers properly. what should I do ?

CodePudding user response：