<!DOCTYPE html>
<html>
<head>
<title>Composing a Layout on a WebPage</title>
<style>
body {
background: rgb(233, 191, 198);
color: rgb(80, 41, 41);
font-family: Helvetica Neue;
margin: 0;
padding: 0;
}
header{
background:rgb(197, 166, 151);
padding: 20px ;
}
section {
background:rgb(169, 164, 189);
color: white;
padding: 20px;
display: flex;
flex-direction: row;
}
div {
background: red;
margin:auto;
width: 110px;
}
footer {
background:rgb(207, 226, 140);
padding: 20px;
}
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
display: inline-block;
margin: 20px 20px 20px 0px;
}
</style>
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>Locations</li>
<li>Contacts</li>
</ul>
<h1>Title</h1>
</header>
<section>
<div>a</div>
<div>b</div>
<div>c</div>
</section>
<section>Lower-Section</section>
<footer>Footer</footer>
</body>
</html>jIf you inspect your list (right click > inspect), and hover over the ul element in the elements panel (I’m using Chrome) you can see what’s causing that shift in position:
This is ul padding, not li margin… though I just noticed you had ul padding set to 0 
… so now its about checking your CSS syntax! Look! there’s an extra } below the footer styles which is breaking everything beneath it. Remove the extra brace and you should be ok.
FYI, your image is getting cut off for me on mobile, so I couldn’t read all of the text. You’re better off including it as text in the forum rather than using a picture (its more easily searchable this way too 
). I think I got the gist of it though…
Inspect like this was not to show the error. Inspect, as I was using it, was to show where the spacing in the layout was coming from. In my screenshot you could see a green block that was present to the left of the text when hovering over the ul in the elements panel (your second screenshot). That was showing the spacing was coming from the ul and that it was padding (green is padding, orange is margin - click on the Computed tab and you get a box with more details about those like actual dimensions).
How I knew there was an error was because I saw the code had ul { padding: 0; ... and yet we were not seeing the ul with a padding of 0. That green box showing that there was, in fact, padding. That suggested there was an error and so I just looked over all the styling with a fine toothed comb until I noticed the extra curly brace.
CSS is a little different than JS when it comes to errors. While JS may not work at all if there’s a syntax error, CSS will work up until there’s an error, then stop and ignore everything else. HTML is also a little different in that it will do the best it can. Some HTML errors end up breaking everything else, but also some errors just seem to get skipped or somehow translated to something almost right (if not exactly as intended despite the error). Each of these languages is a little different in how errors are handled. For CSS you can kind of tell where the error is by looking for the place where styles go from working to not.
Like JS, CSS has linters too. Here’s one I quickly googled that you can use online: http://csslint.net/ . Depending on what you’re using to write code, you may also get this automatically. I think the default install of VSCode does this, and a lot of online editors like codepen and jsfiddle also have built in linters that would catch this as well.
Ah - Inspect Element is wonderful! I can see the utility of this program in how it makes it easy to visualize the different components of your code including the margin and padding. I haven’t heard of IE up to this point and I thank you so much for bringing it to my attention. Now to write some more code and use IE to verify it!