Want to remove space between containers

Question

I have created a top bar menu (colored in light green) and a navigation menu (dark green). There is a black space between both. This is the background here is the header (.site-header). I have tried using margin: 0px on this element amongst others but no joy.

Child elements of both the top bar and main nav menu's are set to display: inline-block.

HTML

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Music Website</title>
  <meta name="description" content="Music Website">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="normalize.css">
  <meta http-equiv="refresh" content= "1.5">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>
  <script src="js/scripts.js"></script>

    <header class="site-header">
        <div class="top-bar">
            <ul>
                <li class="top-bar-items"><i class="material-icons">call</i>Phone: 088-888-8888<a href="#"></a></li>
                <li class="top-bar-items"><i class="material-icons">email</i>Email: info@music.com<a href="#"></a></li>
                <li class="top-bar-items"><i class="material-icons">access_time</i>Opening Hours: Mon - Fri 9am - 5.30pm<a href="#"></a></li>
            </ul>
        </div>

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Tours</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

    </header>
        <div class="site-body">
            <div class="main"></div>
                <aside class="sidebar"></aside>
            </div>

    <footer class="site-footer">
        <p></p>
    </footer>       

</body>
</html>

CSS

.site-header {
    background-color: #000;
    margin: 0px;
}

.top-bar {
    background-color: springgreen;
    margin: 0 auto;
}

.top-bar ul {
    margin: 0px; 
    padding: 5px;
    text-align: center;
}

.top-bar li {
    list-style: none;
    padding: 5px;
    display: inline-block;
}

.top-bar-items {
    margin: 0px;
}

/*.top-bar:after {
    content: "";
    display: block;
    clear: both;
}*/

.top-bar-items i {
    vertical-align: middle;
    padding-right: 5px;
}

nav {
    background-color: seagreen;
    height: 100px;

}

nav li {
    list-style: none;
    padding: 15px;
    display: inline-block;
}

nav li a {
        text-decoration: none;
        color: #000;
        font-family: 'Raleway', sans-serif;
        background-color: orange;
        padding: 5px;
}

Image Of PAGE

Top Bar & Main Nav

score 0 · Accepted Answer · answered Nov 24 '20 at 17:06

0

Add this in your CSS:

      *{
          padding: 0%;
          margin: 0%;
      }

It fixed it for me!

answered Nov 24 '20 at 17:06

nejc26

197
7

But will reset all padding and margin in `*` I think – Adhitya Nov 24 '20 at 17:22
You're welcome :) – nejc26 Nov 25 '20 at 17:11

score 0 · Answer 2 · answered Nov 24 '20 at 17:20

I found a problem into user agent stylesheet
in user agent stylesheet

This a your problem in User Agent Style Sheet

ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}

Then I'm added Css code in nav with

nav ul {
margin-block-start: 0em!important;
margin-block-end: 0em!important;
}

So I get Result like this

.site-header {
    background-color: #000;
    margin: 0px;
}

.top-bar {
    background-color: springgreen;
    margin: 0 auto;
}

.top-bar ul {
    margin: 0px; 
    padding: 5px;
    text-align: center;
}

.top-bar li {
    list-style: none;
    padding: 5px;
    display: inline-block;
}

.top-bar-items {
    margin: 0px;
}

/*.top-bar:after {
    content: "";
    display: block;
    clear: both;
}*/

.top-bar-items i {
    vertical-align: middle;
    padding-right: 5px;
}

nav {
    background-color: seagreen;
    height: 100px;
}
nav ul {
    margin-block-start: 0em!important;
    margin-block-end: 0em!important;
}
nav li {
    list-style: none;
    padding: 15px;
    display: inline-block;
}

nav li a {
        text-decoration: none;
        color: #000;
        font-family: 'Raleway', sans-serif;
        background-color: orange;
        padding: 5px;
}

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Music Website</title>
  <meta name="description" content="Music Website">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="normalize.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <script src="js/scripts.js"></script>

    <header class="site-header">
        <div class="top-bar">
            <ul>
                <li class="top-bar-items"><i class="material-icons">call</i>Phone: 088-888-8888<a href="#"></a></li>
                <li class="top-bar-items"><i class="material-icons">email</i>Email: info@music.com<a href="#"></a></li>
                <li class="top-bar-items"><i class="material-icons">access_time</i>Opening Hours: Mon - Fri 9am - 5.30pm<a href="#"></a></li>
            </ul>
        </div>

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Tours</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

    </header>
        <div class="site-body">
            <div class="main"></div>
                <aside class="sidebar"></aside>
            </div>

    <footer class="site-footer">
        <p></p>
    </footer>       

</body>
</html>

score 0 · Answer 3 · answered Nov 24 '20 at 17:24

The margin you are getting is from the ul which is applied as default styling from browser.

To fix this, you should reset the css.

*{
margin: 0;
padding: 0;
}

Here is a better version of css reset and also a little description to help you understand what is reset css. https://meyerweb.com/eric/tools/css/reset/

Also, if you inspect element, you can see that default styling.

score 0 · Answer 4 · answered Nov 24 '20 at 17:28

0

Just add this to your stylesheet:

nav ul {
  margin-top: 0;
}

answered Nov 24 '20 at 17:28

Evik Ghazarian

1,803
1
9
24

Want to remove space between containers

4 Answers4