0

I am very beginner with CSS and HTML. How to remove gaps around nav bar? Example image of the gaps around navbar.

I tried width and height attributes but it didn't work.

* {
  text-decoration: none;
}

.navbar {
  background: rgba(0, 0, 0, 0.6);
  font-family: calibri;
  padding-top: 5px;
  padding-right: 15px;
  padding-left: 15px;
  top: 10;
  left: 0;
  witdth: 100%;
  height: 130px;
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  background-size: cover;
  widtth: cover;
  height: cover;
}

.navdiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

li {
  list-style: none;
  display: inline-block;
}

li a {
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-right: 25px;
}
<body background="background.jpg">
        <nav class="navbar">
        <div class="navdiv">
        <div class="logo"><a href="#"><img id="logo" src="views.png" width="12%" height="12%"></a></div>
        <ul>    
        <li><a href ="#">Подписка</a></li>
        <li><a href ="#">Кино</a></li>
        <li><a href ="#">Сериалы</a></li>
        </ul>
    </nav>

Margin and Padding editing didn't work

Egor
  • 1
  • 1
  • 2
    I see you added CSS but it doesn't match the HTML that you have. There are no HTML elements with the classes of navbar, navdiv. – imvain2 Mar 23 '23 at 16:20
  • 1
    html and body tags will have padding and margin . You can set them to 0 to remove space around navbar.. – vishnu sandhireddy Mar 23 '23 at 16:21
  • Gaps like that are usually caused by padding on the parent (body) or margin on the child (navbar) – ShanieMoonlight Mar 23 '23 at 16:23
  • 1
    HereticMonkey kindly created a running demo of your code, could you adjust that so that it reproduces the problem you describe? Also, white text on a white background is impossible to see, you may wish to edit that also. – David Thomas Mar 23 '23 at 16:34
  • @ShanieMoonlight the body by default has no padding. However, it has a default margin of 8px for most browsers. – tacoshy Mar 23 '23 at 16:41
  • @imvain2, I have edited code. I had html elements. Probably I misclicked and didnt put it. Could you check edited one please? – Egor Mar 24 '23 at 11:33
  • Where do you close
    ?
     – floreapaun Mar 24 '23 at 11:52
  • Seems to me as the default body margin which you didn't reset `body { margin: 0; }` – tacoshy Mar 24 '23 at 11:58
  • Does this answer your question? [How wide is the default \`\` margin?](https://stackoverflow.com/questions/13127887/how-wide-is-the-default-body-margin) – tacoshy Mar 24 '23 at 12:16

1 Answers1

0

That can be the default margin and padding, set them to 0

body {
  margin: 0;
  padding: 0;
}
Anas Abdullah Al
  • 241
  • 2
  • 7