Inherited Style Properties? [FLEX

I am trying to use Flex Boxes in order to style a nav bar on my website. I'm not sure what I'm doing wrong, but there's default properties being applied on my UL. I have attached screenshots and code snippets below. Image of Issue (spacing) Inherited Properties?

HTML

  <body>
      <div >
        <header >
          <img id="icon" src="logo.png" alt="logo" href="#index">
            <nav>
              <ul>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#combos">Combos</a></li>
                <li><a href="#reservation">Reservation</a></li>
                <li><a href="#about">About Us</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </nav>
          <img id="cart" src="cart.png" alt="cart" href="#cart">
        </header>  
      </div>
  </body>

CSS

* {
  font-family: Montserrat, sans-serif;
  text-transform: uppercase;
  text-align: center;
  color:white;
}
body {
  background: #FF9292;
}
.container {
  width: 100%;
  min-height: 100vh;
  padding-left: 8%;
  padding-right: 8%;
  box-sizing: border-box;
  overflow: hidden;
}
.navbar{
  margin-top: 2.5%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#icon {
  width: 65px;
  cursor: pointer;
}
#cart {
  width: 25px;
  cursor: pointer;
}
nav ul li {
  list-style: none;
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
  color: white;
  font-size: 14px;
}
nav ul li a:hover {
  color: #3f3e3e;
}

CodePudding user response：

Those are not inherited properties, but the default styles supplied by your browser, the so-called user agent stylesheet.

The styles in a user agent stylesheet are typically applied to all elements on the page, and are used to provide a basic layout and appearance for the page.

The purpose of a user agent stylesheet is to provide a consistent and predictable default appearance for web pages, so that all users have a similar experience when viewing web pages. The styles in a user agent stylesheet are typically based on the default styles provided by the World Wide Web Consortium (W3C), the organization that sets standards for the web.

User agent stylesheets can vary depending on the web browser that is being used. Different web browsers can have different default styles for the same HTML elements, so the appearance of a webpage can vary depending on which web browser is used to view it.

For example, the default font size and font family for a p element may be different in Chrome and Firefox. In Chrome, the default font size for a p element may be 16 pixels, and the default font family may be Arial, sans-serif, whereas in Firefox, the default font size for a p element may be 15 pixels, and the default font family may be Verdana, sans-serif.

You'd need to manually override those styles in your case.

To make this easier, people, especially back in the day, started using so-called "CSS Resets" which are boilerplate stylesheets that set all of those values to 0, so you have a de-facto standard without worrying about cross-browser styles and don't need to override such values.

CodePudding user response：

what are you expecting from this code if you are thinking why 'li' are aligned horizontally without adding display: flex; in 'ul' then it is because you added display:inline-block; in 'li'.