Border to take full parent's height

Programming HTML-CSS
1

I’m trying to build a BBC clone and I’m facing a problem with the navbar.

https://projects-jtos.github.io/bbc-clone/ this is my version
https://cdn.discordapp.com/attachments/455513799038861334/455515935734759425/bbc-news.png this is the original site

I would like to borders to take the full height of the parent, not their own. Is there any way to accomplish that?

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BCC Clone</title>
  <link rel="stylesheet" href="css/style.css">

</head>

<body>
  <!-- We're using BEM here to name our classes -->
  <nav class="navbar-main">

    <div class="logo">
      <span>B</span>
      <span>B</span>
      <span>C</span>
    </div>

    <div class="navbar-main__link">
      <div class="navbar-main__signin">
        <a href="#">Sing in</a>
      </div>

      <div class="navbar-main__topics">
        <a href="">News</a>
        <a href="">Sport</a>
        <a href="">Weather</a>
        <a href="">Shop</a>
        <a href="">Earth</a>
        <a href="">Travel</a>
        <a href="">More</a>
      </div>

      <div class="navbar-main__search">
        <input placeholder="search">
      </div>
    </div>

  </nav>


  <nav class="navbar-news">
    <div class="navbar-news__container">
      <span>News</span>
    </div>
  </nav>


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

</html>

CSS

body,
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: BBC-Reith-sans, Helvetica, Arial, sans-serif;
}

.navbar-main {
  display: flex;
  width: 80%;
  margin: 3px auto;
  font-size: 12px;
  font-weight: 600;
}

.navbar-main__link {
  width: 88%;
  display: flex;
  justify-content: space-between;
  /* verticaly align the nav */
  align-items: center;
}

.navbar-main .logo {
  border-right: thin solid #4e4d4d;
  padding-right: 10px;
}

.navbar-main .logo span {
  font-size: 22px;
  color: white;
  padding: 1px 7px;
  font-weight: 600;
  background-color: #000;
}

/* sign in link styles */
.navbar-main__signin {
  cursor: pointer;
  padding-left: 10px;
  display: inline-block;
  /* invisible border */
  border-bottom: 5px solid rgba(0, 0, 255, 0);
}

/* general link styles */
a:link,
a:active,
a:visited {
  text-decoration: none;
  color: rgb(85, 82, 87);
  font-size: 12px;
}

.navbar-main__signin:hover {
  /* show change the border color on hover */
  border-bottom: 5px solid rgba(0, 0, 255, 1);
}

.navbar-main__signin {
  margin: 0;
  font-size: 16px;
}

/* Link styles on main-nav*/
.navbar-main__topics a:link,
a:active,
a:visited {
  color: rgb(85, 82, 87);
  padding: 0 10px;
  border-left: thin solid #ccc;
}

.navbar-main__topics a:last-child {
}

/* vertical border for the input */
.navbar-main__search {
  border-left: thin solid #ccc;
  padding-left: 10px;
}

/* style the input */
.navbar-main__search input[type='text'] {
  padding: 5px;
  border: none;
  background-color: rgb(231, 231, 231);
  outline: none;
}

/* News */
.navbar-news {
  width: 100%;
  height: 90px;
  background-color: #d62f2f;
}

.navbar-news__container {
  padding-top: 5px;
  width: 80%;
  margin: auto;
}

.navbar-news__container span {
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  font-size: 45px;
  font-weight: 300;
}
2

Not sure what you mean.
I checkout our the original site and your site
The main difference is that the borders are not the same height along with the font size.

Do you want to make the border size bigger.