Unwanted space between menu and content

Question

I am developing a website with the help of HTML and CSS. Here, I have two parts of the page, first one - the menu and second part - rest of content. I am seeing an unwanted space between both parts. I checked the code many times but I could not find any reason for this. I used the developer tools to see what could I do. The margin was 0px. When I reduced the margin to -18 or -19px, then I could see both parts joined.

Also, another problem is there. The paragraph text is going outside the container(as shown in the image). The code is as below -

body {
    margin: 0px;
    background-color: #d6d6d6;
    color: black;
}

a {
    text-decoration: none;
    color: black;
}

#top{
    width: 100%;
    height: 80px;
    background-color: white;
    position: sticky;
    box-shadow: 0 0 5px 0.1px;
}

header img {
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px solid black;
    margin-left:  50px;
    float: left;
    width: 15%;
    height: 80px;
}

nav a {
    margin: 81px;
    font-size: 40px;
    font-family: sans-serif;
    color: darkgray;
}

nav {
    padding: 20px;
}

#container {
    width: 1190px;
    background-color: white;
    margin: 0 auto;
    box-shadow: 0 0 5px 0.1px;
}

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Home | Day to Dayz Solutions</title>
    </head>
    
    <body>
        <div id="top">
            <header>
                <img src="http://placehold.it/400px80">
            </header>
            <nav>
            <a href="home.html">Home</a>
            <a href="our_services.html">Our Services</a>
            <a href="contact_us.html">Contact Us</a>
            </nav>
        </div>
        <div id="container">
        <article>
            <section>
                <h1>About Us</h1>
                <p>gwserwsethsyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy5454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454544</p>
            </section>
        </article>
        <footer>&copy; <p>2020 | Site Designed and Developed by Praneet Dixit</p></footer>
        </div>
        
    </body>
</html>

I know that the contents of the menu could mess up because I am not using flexbox or anything like that. Please ignore that.

That’s the default margin of the `h1` _collpasing_ through the parent element. https://css-tricks.com/what-you-should-know-about-collapsing-margins/, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing — CBroe, Jun 05 '20 at 07:34

score 1 · Answer 1 · answered Jun 05 '20 at 07:36

1

The unwanted space you mentioned is coming because of h1 tag you used for about us.

<h1>About Us</h1>

try changing it to:

<span>About Us</span>

and give custom css to it as you like:

span {
padding: 5px;
margin: 5px;
}

answered Jun 05 '20 at 07:36

elpidaguy

624
1
11
25

Thanks! The problem is solved, but the content inside the p tag is going out of its parent div (refer to the red circle in the image in the question). – Praneet Dixit Jun 05 '20 at 07:42
@PraneetDixit there are many ways to solve that problem,quickest way, you can set overflow-x: scroll for scroll bar or word-wrap:break-word; display:block; to wrap your string inside... – elpidaguy Jun 05 '20 at 07:44

score 1 · Answer 2 · answered Jun 05 '20 at 07:43

1

For the content to stay within the box apply this property to your p tag

word-break: break-all;

And if you want your boxes to align one after the other, remove margin from your h1 like this:

h1{
  margin: 0;
}

answered Jun 05 '20 at 07:43

arnavpanwar99

377
2
6

score 0 · Accepted Answer · answered Jun 05 '20 at 07:43

There is a margin on <h1> causing the spacing between header and content. Set margin: 0 to h1 will remove the extra spacing. For the second issue, you may use word-break: break-all; to prevent the text-overflow in the container. Please see code snippet for details.

/* Issue 1: extra space between header and content */
h1 {
  margin: 0;
}


/* Issue 2: Overflow with long word */
p {
  word-break: break-all;
}

body {
  margin: 0px;
  background-color: #d6d6d6;
  color: black;
}

a {
  text-decoration: none;
  color: black;
}

#top {
  width: 100%;
  height: 80px;
  background-color: white;
  position: sticky;
  box-shadow: 0 0 5px 0.1px;
}

header img {
  padding-left: 20px;
  padding-right: 20px;
  border-right: 1px solid black;
  margin-left: 50px;
  float: left;
  width: 15%;
  height: 80px;
}

nav a {
  margin: 81px;
  font-size: 40px;
  font-family: sans-serif;
  color: darkgray;
}

nav {
  padding: 20px;
}

#container {
  width: 1190px;
  background-color: white;
  margin: 0 auto;
  box-shadow: 0 0 5px 0.1px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home | Day to Dayz Solutions</title>
</head>

<body>
  <div id="top">
    <header>
      <img src="http://placehold.it/400px80">
    </header>
    <nav>
      <a href="home.html">Home</a>
      <a href="our_services.html">Our Services</a>
      <a href="contact_us.html">Contact Us</a>
    </nav>
  </div>
  <div id="container">
    <article>
      <section>
        <h1>About Us</h1>
        <p>gwserwsethsyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy5454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454544</p>
      </section>
    </article>
    <footer>&copy;
      <p>2020 | Site Designed and Developed by Praneet Dixit</p>
    </footer>
  </div>

</body>

</html>

Unwanted space between menu and content

3 Answers3