0

I am working on a school project and I am making a website, we are almost done. However there is one annoying thing that I personally can not fix.

I have a weird border around the page and I don't know how to fix it. What I want is that the blue navigation bar goes all the way from the left to the right of the page but there is a white stripe.

screenshot

.menu-navigation-round {
  font: bold 12px Arial, Helvetica, sans-serif;
  text-align: center;
  height: auto;
  background-color: #195b92;
  widht: 100%;
  padding: 25px;
}

.menu-navigation-round a {
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  margin: 0 20px auto;
  line-height: 2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.menu-navigation-round a.selected {
  border: solid;
  border-width: 0.5px;
  border-color: white;
  color: white;
  padding: 10px;
  border-radius: 25px;
}
<nav class="menu-navigation-round">
  <a href="#" class="selected">Stemmen</a>
  <a href="faq.php">FAQ</a>
  <a href="contact.php">Contact</a>
  <a href="login.php">Uitloggen</a>
</nav>
depperm
  • 10,606
  • 4
  • 43
  • 67
Bram Veltink
  • 11
  • 2

2 Answers2

0

I believe you need to unset the body margin

.menu-navigation-round {
  font: bold 12px Arial, Helvetica, sans-serif;
  text-align: center;
  height: auto;
  background-color: #195b92;
  widht: 100%;
  padding: 25px;
}

.menu-navigation-round a {
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  margin: 0 20px auto;
  line-height: 2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.menu-navigation-round a.selected {
  border: solid;
  border-width: 0.5px;
  border-color: white;
  color: white;
  padding: 10px;
  border-radius: 25px;
}

body {
  margin: unset;
}
<nav class="menu-navigation-round">
  <a href="#" class="selected">Stemmen</a>
  <a href="faq.php">FAQ</a>
  <a href="contact.php">Contact</a>
  <a href="login.php">Uitloggen</a>
</nav>
depperm
  • 10,606
  • 4
  • 43
  • 67
0

Your website as default have margin. Try to apply margin: 0 to all objects.

* { margin: 0; padding: 0; box-sizing: border-box; }


* { box-sizing: border-box; padding: 0; margin: 0; }
.nav { width: 100%; height: 60px; background: red; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.nav a { padding: 0 10px; color: #fff; text-decoration: none; }
<html>
<body>
<div class="nav">
  <a href="/">Link1</a>
  <a href="/">Link2</a>
  <a href="/">Link3</a>
  <a href="/">Link4</a>
</div>
</body>
</html>
lance
  • 52
  • 1
  • 7