Why does my website looks different on mozilla firefox and chrome?

Question

I've been doing my html and i always open it using Mozilla Firefox. It seems okay but when I open it with my localhost using Chrome, it looks different.

• Firefox
• Chrome

This is the part that it went different:

<div class ="label">
  <li><a href="html/profiles.html"> Profiles</a></li>
  <li><a href="html/expertise.html"> Expertise</a></li>
  <li><a href="html/location.html"> Location</a></li>
</div>

This is the css part:

.label 
{
  display: inline-flex;

}

.label li a 
{
  margin-right: -433px;
  margin-left: 490px;
  text-decoration: none;
  font-size: 20px;
  list-style: none;
  font-family:"Arial", Serif;
  font-weight: bold;
  color: #3b5998;
}
.label li{
  list-style: none;
}

Answer 1

The Problem is, that you are using <li> Elements without its enclosing <ul> elements. That it gets displayed correctly on firefox, is only a matter of luck.

try using the <ul> elements, too, or remove your <li> tags.

For more informations take a look at this question . Here is the documentation of using <ul> or <ol> including <li>

Answer 2

li does not work fine on different browsers without ul or li . You should enclose this with ol or ul tags. Here is an example

 <div class ="label"> <ul> <li><a href="html/profiles.html"> Profiles</a></li> <li><a href="html/expertise.html"> Expertise</a></li> <li><a href="html/location.html"> Location</a></li> </ul> </div> 

Moreover, all browsers have a default styling for all HTML elements. these elements are rendered based on default styling unless and until browser does not find styling for that element in CSS. If you want to make the look of lists in both chrome and firefox, you will need to write CSS for the list and list items.