Personal Portfolio Project - weird white space between welcome-section & fixed nav bar

Hey guys,
When i add margin-top to my h1 tag of welcome-section, there’s a white space came up on top of my welcome-section, why the white space came up on top of my welcome-section instead of h1.
Also if i gave border: 2px solid black; to welcome-section the problem gets resolved, and don’t now even this,
I don’t now what is happening here.

  • {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    body {
    font-size: 1rem;

      /* Navigation Styling */
      nav {
          position: fixed;
          top: 0;
          left: 0;
          background-color: #BE3144;
          width: 100%;
      nav ul {
          display: flex;
          justify-content: flex-end;
          list-style: none;
          margin-right: 40px;
      @media(max-width: 600px) {
          nav ul {
              justify-content: center;
              margin-right: 0px;
      nav ul li {
          color: white;
          font-size: 1.6rem;
          padding: 1.1em 1em;
      /* Welcome section  */
      #welcome-section {
          background-color: #3a3d40;
          height: 100vh;
          margin-bottom: 200px;
          /* This border is Solving the problem otherWise the white space came up.  */
          /* border: 1px solid black; */
      #welcome-section h1 {
          font-weight: 700;
          font-size: 4rem;
          text-align: center;
          color: white;
          margin-top: 200px;
<script src=""></script>

<!-- Navigation  -->



        <li><a id="#">About</a></li>

        <li><a id="#">Work</a></li>

        <li><a id="#">Contact</a></li>



<!-- Welcome Section  -->

<div id="welcome-section">

    <h1>Hey I am Danish</h1>

    <p>a web developer</p>


That’s because of a thing called “margin collapse”.

Here’s a very good article about it:

TLDR: Add display: flex or display: flow-root to #welcome-section

1 Like


This is an old problem with css.
One of the reason I rarely use margin, because of this.
There is another link to understand about margin collapse:
Mastering margin collapsing - CSS: Cascading Style Sheets | MDN (

The simple approach is to add border-top on the parent or like :point_up: solution.

1 Like

Sir you said you are not using margins rarely, basically so what u used in these kind of scenarios.


I use Spacer, or just span on top of h1 with display block and give it a certain height :smiley:

What is spacer?, maybe this one is more related:
Bringing Spacer GIFs Back, to handle spacing elements in React and CSS (

Why I rarely use margin, because its behavior is kind of weird imo.
Margin considered harmful (

1 Like