Elementy na stronie obojętne na margin: 0 i padding: 0

W projekcie strony w selektorze css * mam ustawione marginesy i padding na 0. Mimo tego elementy div jak np. newsletter i footer mają marginesy. Nie mogę ich w żaden sposób usunąć. Co jest nie tak?

Live share do mojego projektu:

https://prod.liveshare.vsengsaas.visualstudio.com/join?114E9D21D128C44ABF78095CED8B93A26B93

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Title -->
    <title>Digital Nomads - All you need to work remotely, make money, rock your social media and cheap travel</title>

    <!-- Meta -->
    <meta name="description" content="The best articles to make easy money and work from home for a Digital Nomads. Boost your social media channels with us and travel around the world." />
    <meta name="author" content="SF" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="keywords" content="social media, make money, work remote, cheap travel, work at home, easy money, money online, make money fast, rock your social media, social media guru, digital nomads, nomads, enomads, instagram, facebook, pinterest, tik tok, youtube" />
    
    <!-- Charset -->
    <meta charset="utf-8" />

    <!-- External CSS -->
    <link href="https://fonts.googleapis.com/css?family=Cardo&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Vollkorn&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Vollkorn+SC&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Simonetta&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="https://kit.fontawesome.com/6e14179572.js"crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script>
      $(document).ready(function() {
        $('.menu').click(function() {
          $('nav').slideToggle('100');
        });
      });
    </script>
  </head>
<body>
  <nav>
    <h1 class="brand"><a href="#">Enomad</a></h1> 
      <ul>
        <li><a href="money.html">Make money online</a></li>
        <li><a href="management.html">Money management</a></li>
        <li><a href="social.html">Rock your social media</a></li>
        <li><a href="travel.html">Cheap travel</a></li>
      </ul>
    </ul>
    <div style="clear: both"></div>
  </nav>
  <div class="responsive-bar">
    <h3 class="brand"><a href="#">Enomad</a></h3>
    <h4 class="menu">Menu</h4>
    <div style="clear: both"></div>
  </div>
<div class="banner">
  <div class="container">
    <h1>Money management</h1>
    <p>z
    Do you want to save money and pay off debt? Try this top money management tips to get your finances in order.
    </p>
    <div class="search">
      <form action="https://google.com">
        <input type="text" class="input-res" name="search" placeholder="Search for articles..." ><input type="submit" value="Submit">
      </form>
    </div>
  </div>
</div>
<div class="bg-stretch" id="stretch3"></div>
  <div class="container">
    <div class="help">
      <h2>What is your main problem?</h2>
    <div class="cards">
      <section class="card">
        <picture class="thumbnail"><img src="img/savemoneytips.jpg" alt="savemoneytips"></picture>
        <h3 class="help-item-title"><a href="#">50 top saving money tips</a></h3>
        <p>How to save money without much effort and even a small salary? Here are some ways everyone can benefit, regardless of earnings.
        </p>
      </section>
      <section class="card">
        <picture class="thumbnail"><img src="img/coupons.jpg" alt="coupons"></picture>
        <h3 class="help-item-title"><a href="#">20 best coupon websites</a></h3>
        <p>All promotions and sales available online. Discount codes and coupons for hundreds of online stores. Find your store and take advantage of discounts!</p>
      </section>
      <section class="card">
        <picture class="thumbnail"><img src="img/groceryapps.jpg" alt="coupons"></picture>
        <h3 class="help-item-title"><a href="#">Smart apps for save money on groceries</a></h3>
        <p>Don't waste food and save money! Here are the best applications for everyday use that everyone should know.</p>
      </section>
    </div>
  </div> 
<div class="coming-up">
  <h2>Learn more about</h2>
  <div class="coming-up-block">
    <div class="coming-up-item">
      <div class="coming-up-inner">
        <div class="coming-up-ico">
          <img src="img/icons/gadgets.png">
        </div>
          <div class="coming-up-name">
            <a href="#">Save on gadgets</a>
          </div>
      </div>
    </div>
    <div class="coming-up-item">
      <div class="coming-up-inner">
        <div class="coming-up-ico">
          <img src="img/icons/meal.png">
        </div>
          <div class="coming-up-name">
            <a href="#">Plan your meals</a>
          </div>
      </div>
    </div>
    <div class="coming-up-item">
      <div class="coming-up-inner">
        <div class="coming-up-ico">
          <img src="img/icons/subscription.png">
        </div>
          <div class="coming-up-name">
            <a href="#">Subscription services</a>
          </div>
      </div>
    </div>
    <div class="coming-up-item">
      <div class="coming-up-inner">
        <div class="coming-up-ico">
          <img src="img/icons/transport.png">
        </div>
          <div class="coming-up-name">
            <a href="#">Cut transport costs</a>
          </div>
      </div>
    </div>
    <div class="coming-up-item">
      <div class="coming-up-inner">
        <div class="coming-up-ico">
          <img src="img/icons/yoga.png">
        </div>
          <div class="coming-up-name">
            <a href="#">Reduce entertainment expenses</a>
          </div>
      </div>
    </div>  
    <div class="coming-up-item">
        <div class="coming-up-inner">
          <div class="coming-up-ico">
          <img src="img/icons/travel.png">
          </div>
            <div class="coming-up-name">
              <a href="#">Budget travel</a>
            </div>
        </div>
      </div>  
     </div>
  <div>
</div>
<div id="stretch5" class="newsletter-opt-in"> 
    <div class="frame">
      <h2>Join our<span class="vip">VIP list</span></h2>
      <p class="vip-list-paragraph">For the exclusive tips, free resources and best tips</p>
      <form action="http://eepurl.com/gUrUvD">
        <input type="button" value="SUBSCRIBE">
      </form>
    </div>
</div>
<div class="most-popular">
  <h1>Most popular articles</h1>
</div>
<div class="article-section">
    <div class="article-1">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
    <div class="article-2">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
    <div class="article-3">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
    <div class="article-4">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
    <div class="article-5">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
    <div class="article-6">
        <a href="" class="card">
            <div class="thumb" style="background-image: url();"></div>
            <article>
                <h1>Post title</h1>
                <span>Author</span>
            </article>
        </a>
    </div>
</div>
<div class="footer">
  <div class="footer-social-icons">
    <ul>
      <li><a href="#" target="blank"><i class="fab fa-facebook"></i></a></li>
      <li><a href="#" target="blank"><i class="fab fa-instagram"></i></a></li>
      <li><a href="#" target="blank"><i class="fab fa-twitter"></i></a></li>      
      <li><a href="#" target="blank"><i class="fab fa-pinterest-square"></i></a></li>  
    </ul>
  </div>
<div class="footer-menu-one">
  <div>
    <ul>
      <li><a href="#">About us</a></li>
      <li><a href="#">Make money online</a></li>
      <li><a href="#">Money management</a></li>
      <li><a href="#">Rock your social media</a></li>
      <li><a href="#">Cheap Travel</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<hr>
<div class="footer-bottom">
  <p>Design by:<a href="#">SF Studio</a></p>
</div>
</body>
</html

Wewnątrz footer-botom p znajduje się padding-bottom:

.footer-bottom p {
padding-bottom: 0.9em;
}

Aczkolwiek moim zdaniem bez tego padding-bottom-u wygląda źle.

Div z klasą "newsletter-opt-in" zaś ma także id="Stretch5" do którego przypisano wysokość: 30em.

Ona ustanawia wysokość danego diva, co sprawia, że pod frame znajduje się jeszcze pewna przestrzeń.

Usuń height: 30em dla #stretch5, ale nie będzie to wyglądać dobrze.

Podobnie height dla frame ustanawia niejako marginesy.

Bo jeśli np stworzysz div, wewnątrz napiszesz tytuł, nadasz tytułowi margines top i bottom 5rem załóżmy, tytuł będzie miał powiedzmy line-height 2rem, to cały div wyniesie 12rem wysokości z tytułem wyśrodkowanym w pionie.

Ten sam efekt możesz osiągnąć nadając divowi 12 rem height, i dla tego samego tytułu padding-top: 5rem, a wysokość diva 12 rem sprawi, że jeszcze 5 rem pod tytułem będzie się wyświetlać wolnej przestrzeni.