Q:

How to add margin to an HTML element?

https://jsfiddle.net/mp3ajvrL/
I'm trying to add a margin between the list element "contact us" and the h3 element with the text "Functional and Non-Functional Requirements". However, I am not able to do this. It looks like the h3 element covers the whole list somehow, so that the margin-top: 10px css will only add a margin above the list. Any tips?

body {
  background-color: #333333;
  margin: auto;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
}

#navbar {
  width: 100%;
  width: 100%;
  float: left;
  margin: 0 0 1em 0;
  padding: 0;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc;
}

.header {
  font-size: 1em;
  margin-bottom: 5%;
}

h2 {
  font-size: 1em;
  text-align: left;
  padding-left: 2%;
  margin-bottom: -1em;
}

h5 {
  text-align: center;
}

h3 {
  text-align: left;
  padding-left: 2%;
  font-size: 1.4em;
  color: white;
  margin-bottom: 0;
  margin-top: 0;
}

p,
ul,
ol {
  font-size: 1.2em;
  line-height: 130%;
  width: auto;
  text-align: left;
  padding-left: 2%;
}

p ol {
  padding-left: 10%;
  padding-bottom: 2%;
}

p ol li {
  margin-bottom: 10px;
}

p {
  float: left;
  margin-bottom: 40px;
  margin-top: 0.1em;
}

#cover {
  width: 100%;
}

.intro .facts .bibliography {
  min-width: 65ch;
  max-width: 75ch;
}

#container {
  position: relative;
  text-align: center;
  color: white;
}

#cover {
  position: relative;
  width: 100%;
}

#headingOnPicture {
  position: relative;
}

#textOverImage {
  position: absolute;
  bottom: 0;
  left: 2%;
}

@media only screen and (max-width: 1122px) {
  #textOverImage {}
}

@media only screen and (max-width: 800px) {
  #textOverImage {}
}

#navbar ul {
  display: inline-block;
  overflow: hidden;
  list-style-type: none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: inline-block;
  list-style-type: none;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  padding: 15px;
  margin: auto;
}

ol {
  padding-left: 5%;
}

ol li {
  margin: 0.5%;
}

#center {
  margin: auto;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  padding-left: 5%;
  padding-right: 5%;
}

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.four {
  width: 60;
}

.four a {
  width: 60px;
}

.container {
  width: 20%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
  font-size: 20px;
}

.one:hover~hr {
  opacity: 1;
  margin-left: 5%;
}

.two:hover~hr {
  opacity: 1;
  margin-left: 28%;
}

.three:hover~hr {
  opacity: 1;
  margin-left: 52%;
}

.four:hover~hr {
  opacity: 1;
  margin-left: 75%;
}

hr {
  margin-left: 0%;
  opacity: 0.1;
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

li b {
  color: powderblue;
}

p {
  float: left;
}

.mainPart {
  width: 80%;
  padding-left: 20%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="styling.css">
</head>

<body>

  <div class="container">
    <ul>
      <li class="one"><a href="/p1.html">P1</a></li>
      <!--
           -->
      <li class="two"><a href="/p2.html">P2</a></li>
      <!--
           -->
      <li class="three"><a href="/p3.html">P3</a></li>
      <!--
           -->
      <li class="four"><a href="/p4.html">P4</a></li>
      <hr />
    </ul>
  </div>

  <div id="container">
    <header id="headingOnPicture">
      <img id="cover" src="mountains.jpg" alt="Cover image" />
      <h1 id="textOverImage">P1: Requirements</h1>
    </header>
    <div class="header">
      <div>
        <div> // 18. September 2019
        </div>
      </div>
    </div>
    <div class="mainPart">

      <h3>
        Administrative Details
      </h3>
      <p>
        Antikvariatet is a cozy bar/pub/café/venue located at Bakklandet in Trondheim. It offers a great assortment of beers as well as outside serving. The inside of Antikvariatet consists of two separated areas. One offers a calm, laid-back atmosphere while
        the other hosts various kinds of events. The events ranges from small concerts and standup comedy to cultural performances and social debates.
      </p>

      <h3>Purpose and goals</h3>
      <p>
        The main purpose of this website is to inform customers about events happening at Antikvariatet. The business goal is to increase the amount of visitors to the venue. This means that the "event" section of the website needs to stand out. In addition,
        special offers also need to be clearly communicated. The website has to capture the cozy atmosphere Antikvariatet offers.
      </p>
      <br>
      <div>
        <h3>Audience</h3>
        <p>
          The intended user is in the age group 18 to 60. These customers tend to use the internet more for looking up information about the venue.
        </p>
        <br>
        <br>
      </div>


      <div class="content">
        <h3>
          The content of the site and how it is organized
        </h3>
        <h2> The major sections of the website:</h2>

      </div>



      <br>
      <ol>
        <li><b>About us: </b> Consists of the general information about Antikvariatet. What the concept is and what they offer.</li>
        <li><b>Menu: </b>Should provide the menu for the restaurant and the selection of beers in the bar.</li>
        <li><b>Events: </b>Events consists of three subcategories the customer can choose between if desired. The subcategories are «Cultural events», «Sosial events» and «Concerts». The customer can also just scroll down and see the unfiltered list of events.
          A «Search for event or concert» - should also appear with a search bar. Next to the event there should be a button to sign up for the event.</li>

        <li><b>Picures: </b>This should consists of pictures showing the cozy atmosphere and the different things they offer. It could also have an Instagram part consisting of pictures taken by customers and tagged with «Antikvariatet».</li>

        <li><b>Contact us: </b>Should contain the information about where they are located with a map, the opening hours, the mail to contact them and the telephone number.</li>
      </ol>
      <div>
        <h3>
          Functional and Non-Functional Requirements
        </h3>
        <h2>
          Non-functional:
        </h2>
        <br>
        <p>
          Due to the large age difference of the clientele, the website should and be easy and intuitive also for users with low technology experience. The appearance of the website should reflect the warm and welcoming environment that Antikvariatet provide. The
          webside should be effective, and all functionalities should react within a second.
        </p>
        <h2>
          Functional:
        </h2>
        <br>
        <p>
          The customers should easily be provided a menu for the café. They should also able to make and send in orders for the different events. The website should provide a calendar for all the events. One should be able to click on a date and see happenings
          on that day, and also all happenings over a longer periode. For better usability, the customer should be able to divide the different events in smaller groups; concerts, social events or cultural activities and be able to search for events.
          The customer should also be able to press a button and get the website in English instead of Norwegian.
        </p>
      </div>
      <h3>Final location:</h3>
      <p>
        We have not yet been in touch with Antikvariatet about making an actual website for them. Howerver, the website will be hosted at one of our folk.ntnu servers.
      </p>
    </div>

  </div>
</body>

</html>

A:

Get rid of the rule:
li {
  float: left;
}

body {
  background-color: #333333;
  margin: auto;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
}

#navbar {
  width: 100%;
  width: 100%;
  float: left;
  margin: 0 0 1em 0;
  padding: 0;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc;
}

.header {
  font-size: 1em;
  margin-bottom: 5%;
}

h2 {
  font-size: 1em;
  text-align: left;
  padding-left: 2%;
  margin-bottom: -1em;
}

h5 {
  text-align: center;
}

h3 {
  text-align: left;
  padding-left: 2%;
  font-size: 1.4em;
  color: white;
  margin-bottom: 0;
  margin-top: 0;
}

p,
ul,
ol {
  font-size: 1.2em;
  line-height: 130%;
  width: auto;
  text-align: left;
  padding-left: 2%;
}

p ol {
  padding-left: 10%;
  padding-bottom: 2%;
}

p ol li {
  margin-bottom: 10px;
}

p {
  float: left;
  margin-bottom: 40px;
  margin-top: 0.1em;
}

#cover {
  width: 100%;
}

.intro .facts .bibliography {
  min-width: 65ch;
  max-width: 75ch;
}

#container {
  position: relative;
  text-align: center;
  color: white;
}

#cover {
  position: relative;
  width: 100%;
}

#headingOnPicture {
  position: relative;
}

#textOverImage {
  position: absolute;
  bottom: 0;
  left: 2%;
}

@media only screen and (max-width: 1122px) {
  #textOverImage {}
}

@media only screen and (max-width: 800px) {
  #textOverImage {}
}

#navbar ul {
  display: inline-block;
  overflow: hidden;
  list-style-type: none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: inline-block;
  list-style-type: none;
}



li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  padding: 15px;
  margin: auto;
}

ol {
  padding-left: 5%;
}

ol li {
  margin: 0.5%;
}

#center {
  margin: auto;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  padding-left: 5%;
  padding-right: 5%;
}

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.four {
  width: 60;
}

.four a {
  width: 60px;
}

.container {
  width: 20%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
  font-size: 20px;
}

.one:hover~hr {
  opacity: 1;
  margin-left: 5%;
}

.two:hover~hr {
  opacity: 1;
  margin-left: 28%;
}

.three:hover~hr {
  opacity: 1;
  margin-left: 52%;
}

.four:hover~hr {
  opacity: 1;
  margin-left: 75%;
}

hr {
  margin-left: 0%;
  opacity: 0.1;
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

li b {
  color: powderblue;
}

p {
  float: left;
}

.mainPart {
  width: 80%;
  padding-left: 20%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="styling.css">
</head>

<body>

  <div class="container">
    <ul>
      <li class="one"><a href="/p1.html">P1</a></li>
      <!--
           -->
      <li class="two"><a href="/p2.html">P2</a></li>
      <!--
           -->
      <li class="three"><a href="/p3.html">P3</a></li>
      <!--
           -->
      <li class="four"><a href="/p4.html">P4</a></li>
      <hr />
    </ul>
  </div>

  <div id="container">
    <header id="headingOnPicture">
      <img id="cover" src="mountains.jpg" alt="Cover image" />
      <h1 id="textOverImage">P1: Requirements</h1>
    </header>
    <div class="header">
      <div>
        <div> // 18. September 2019
        </div>
      </div>
    </div>
    <div class="mainPart">

      <h3>
        Administrative Details
      </h3>
      <p>
        Antikvariatet is a cozy bar/pub/café/venue located at Bakklandet in Trondheim. It offers a great assortment of beers as well as outside serving. The inside of Antikvariatet consists of two separated areas. One offers a calm, laid-back atmosphere while
        the other hosts various kinds of events. The events ranges from small concerts and standup comedy to cultural performances and social debates.
      </p>

      <h3>Purpose and goals</h3>
      <p>
        The main purpose of this website is to inform customers about events happening at Antikvariatet. The business goal is to increase the amount of visitors to the venue. This means that the "event" section of the website needs to stand out. In addition,
        special offers also need to be clearly communicated. The website has to capture the cozy atmosphere Antikvariatet offers.
      </p>
      <br>
      <div>
        <h3>Audience</h3>
        <p>
          The intended user is in the age group 18 to 60. These customers tend to use the internet more for looking up information about the venue.
        </p>
        <br>
        <br>
      </div>


      <div class="content">
        <h3>
          The content of the site and how it is organized
        </h3>
        <h2> The major sections of the website:</h2>

      </div>



      <br>
      <ol>
        <li><b>About us: </b> Consists of the general information about Antikvariatet. What the concept is and what they offer.</li>
        <li><b>Menu: </b>Should provide the menu for the restaurant and the selection of beers in the bar.</li>
        <li><b>Events: </b>Events consists of three subcategories the customer can choose between if desired. The subcategories are «Cultural events», «Sosial events» and «Concerts». The customer can also just scroll down and see the unfiltered list of events.
          A «Search for event or concert» - should also appear with a search bar. Next to the event there should be a button to sign up for the event.</li>

        <li><b>Picures: </b>This should consists of pictures showing the cozy atmosphere and the different things they offer. It could also have an Instagram part consisting of pictures taken by customers and tagged with «Antikvariatet».</li>

        <li><b>Contact us: </b>Should contain the information about where they are located with a map, the opening hours, the mail to contact them and the telephone number.</li>
      </ol>
      <div>
        <h3>
          Functional and Non-Functional Requirements
        </h3>
        <h2>
          Non-functional:
        </h2>
        <br>
        <p>
          Due to the large age difference of the clientele, the website should and be easy and intuitive also for users with low technology experience. The appearance of the website should reflect the warm and welcoming environment that Antikvariatet provide. The
          webside should be effective, and all functionalities should react within a second.
        </p>
        <h2>
          Functional:
        </h2>
        <br>
        <p>
          The customers should easily be provided a menu for the café. They should also able to make and send in orders for the different events. The website should provide a calendar for all the events. One should be able to click on a date and see happenings
          on that day, and also all happenings over a longer periode. For better usability, the customer should be able to divide the different events in smaller groups; concerts, social events or cultural activities and be able to search for events.
          The customer should also be able to press a button and get the website in English instead of Norwegian.
        </p>
      </div>
      <h3>Final location:</h3>
      <p>
        We have not yet been in touch with Antikvariatet about making an actual website for them. Howerver, the website will be hosted at one of our folk.ntnu servers.
      </p>
    </div>

  </div>
</body>

</html>

If you need to float some other set of list items then change the selector to be more specific and target only those list items, not all of them.

