CSS Works in Chrome, but breaks in firefox

Question

I have written a page in html and css. Here is the page: https://wheelertechconsulting.com/page1.html

I designed this page using chrome and when i uploaded to my website, I checked it out in firefox and noticed that that the ul li entrys in the the body div are compressed to the right.

What could be causing this error?

Answer 1

You have many errors in the CSS file

There is 6 errors and 12 warnings in your CSS file.

I used the CSS online validator to discover it

Try to fix those problems, maybe solve this problem.

You can see what the problem is and what line it will be in.

Answer 2

I found the solution, but you must correct the mistakes mentioned in my previous answer

The problem is in :

.featured-images li {
    padding: 0 auto 1% 1%;
    border: .2em solid black;
    margin: 1%;
    ! height: 8em; 
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s ease;
    background: linear-gradient(rgba(0, 255, 255, 0.8), rgba(0, 0, 255, 0.8));

}

If you comment this part of the code : ! height: 8em; ! height: 8em; the problem will be resolved.

Next image before comment ! height: 8em; ! height: 8em;

But after the comment ! height: 8em; ! height: 8em; the appearance will become as in the following image

This part of the code is in the style file at the line 101.