如何覆盖特定元素的属性

Question

CSS 新手 -- 我刚刚在我的网站上添加了一张英雄图片。问题是图像和导航栏之间有一个空格。在我的身体中，我有 margin-top 5rem 我需要它来让我的网站的其余部分正常运行。如何针对特定元素覆盖它，以便删除空格。

.hero-image{
  
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/media/hero_img.jpg/");

  height: 50%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom: 2em;
  margin-top: 0;
  

body {
    height: 100%;
    background: #fafafa;
    color: #333333;
    margin-top: 5rem;
}

html

    {% extends "blog/base.html" %}
{% block content %}

    <div class="hero-image">
    <div class="hero-text">
        <h1>HELLO<h1>
        <button class="hero-btn">Browse</button>
    </div>
    </div>


<main role="main" class="container">
    <div class="row">
        <div class="col-md-8">
            {% for post in posts %}
            <article class="media content-section">
                <img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}" />
                <div class="media-body">
                    <div class="article-metadata">
                        <a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
                        <small class="text-muted">{{ post.date_posted|date:"F d, Y" }}</small>
                    </div>
                    <h3>
                        <a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.manufacture }}</a>
                        <!--Manufacture Displayed-->
                        <a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title }}</a>
                    </h3>
                    <a href="{% url 'post-detail' post.id %}">
                        <img class="img-fluid" src="{{ post.image.url  }}" />
                        <!-- image Displayed-->
                    </a>
                </div>
            </article>
            {% endfor %}
        </div>
    </div>
</main>


{% endblock content %}

css

    :root{
    --primary-color: #29b6f6;
}


body, html {
    height: 100%;
}


.hero-image{
  
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/media/hero_img.jpg/");

  height: 50%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom: 2em;
  margin-top: 0;
  
  
}



.hero-text {
    vertical-align: text-top;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.hero-btn{
    background: var(--primary-color);
    color: white; 
    text-decoration: none;
    padding: .6em 1.3em;
    font-size: 1.4em;
    border-radius: 5em;
    display: inline-block;
    outline: 0;
    border: 0;
    margin-top: 1em;
}



body {
    height: 100%;
    background: #fafafa;
    color: #333333;
    margin-top: 5rem;
}



ul {
    margin: 0;
}

 
.bg-steel {
    background-color: #29b6f6;
}


.site-header .navbar-nav .nav-link {
    color: #cbd5db;
}

    .site-header .navbar-nav .nav-link:hover {
        color: #ffffff;
    }

    .site-header .navbar-nav .nav-link.active {
        font-weight: 500;
    }

.content-section {
    
    background: #ffffff;
    padding: 10px 20px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    margin-bottom: 20px;
}

.article-title {
    color: #444444;
}

a.article-title:hover {
    color: #428bca;
    text-decoration: none;
}

.article-content {
    white-space: pre-line;
}

.article-img {
    height: 65px;
    width: 65px;
    margin-right: 16px;
}

.article-metadata {
    padding-bottom: 1px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e3e3e3
}

    .article-metadata a:hover {
        color: #333;
        text-decoration: none;
    }

.article-svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.account-img {
    height: 125px;
    width: 125px;
    margin-right: 20px;
    margin-bottom: 16px;
}

.account-heading {
    font-size: 2.5rem;
}

导航栏

<header class="site-header">
    <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
        <div class="container">
            <a class="navbar-brand mr-4" href="{% url 'blog-home' %}">HELLO</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarToggle">
                <div class="navbar-nav mr-auto">
                    <a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
                    <a class="nav-item nav-link" href="{% url 'blog-browse' %}">Browse</a>
                    <a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
                </div>
                
                <!-- Navbar Right Side -->
                <div class="navbar-nav">
                    {% if user.is_authenticated %}
                        <a class="nav-item nav-link" href="{% url 'profile' %}">Profile</a>
                        <a class="nav-item nav-link" href="{% url 'post-create' %}">New Post</a>
                        <a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
                    {% else %}
                        <a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
                        <a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>
</header>

我的尝试

从我的阅读中我了解到这是 CSS 特异性的问题。 我试过这个，但没有用。我也试过使用 !important 但它也没有用

    .hero-image body{
    margin-top: 5rem;
}