CSS different behavior external to inline - html

Question

I am learning about css atm, and I am trying to use a external css to style all my website. I found that if I do:
<ul id="menu" style="width:420px; margin:0 auto">
I get the result I want, but if I do it on a external file like:
this is the css file:
*{
margin:0px;
padding:0px;}
header, section, footer, aside, nav, article, hgroup {
display:block;}
body {
width:100%;
display:-webkit-box;
background-color: #808286;
-webkit-box-pack: center;}
#container {
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
background-color: #FFFFFF;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1; }
#top_header {
background-color: #fdd023;
padding: 20px;
border: 2px solid #49207e;}
#new_div {
display:-webkit-box;
-webkit-box-orient: horizontal; }
#navigation_bar {
border: 1px solid #5970B2;
padding: 0;}
#main_section {
border: 1px solid blue;
-webkit-box-flex: 1;
margin: 20px;
padding: 20px;}
#side_left {
border: 1px solid red;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;}
#main_footer {
text-align: center;
padding: 20px;
border-top: 2px solid green;}
#menu {
width:420px;
margin:0 auto;}
#menu li {
list-style: none;
display: inline;
}
#menu li a {
display: inline;
padding: 0 8px 0px;
text-align: center;
text-decoration: none;
}
#menu div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}
#menu div a {
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;}
this is the Html code:
<div id="container">
<nav id="navigation_bar">
<ul id="menu">
<li>
<a href=""">
A
</a>
<div id="firstMenu">
1
2
</div>
</li>
<li>
<a href="">
B
</a>
<div id="secondMenu">
1
2
3
4
</div>
</li>
<li>
<a href="">
C
</a>
</li>
<li>
<a href="">
D
</a>
</li>
<li>
<a href="">
E
</a>
</li>
</ul>
<div style="clear:both"></div>
</nav>
I get a different layout. The first centers my menu bar, and the second one give me a little of a padding. I am using Chrome, but I think I may be missing a key concept here.

Answer 1

The differences you are seeing are due to some other code on the page.
If a CSS rule applies (after the cascade is applied), then it doesn't matter where it came from as far as rendering is concerned.