React.js white space - reactjs

Question

I'm having this issue that I can't solve. It appeared a white space between my first and second components, and I just can't understand where it came from. Nothing shows in the inspector. Here it is:
I'll leave a pic of my Navbar and Home components source code, so you can have a better look. I found the issue in the Navbar, without this ISSUE part, it cleans the top:
import React from "react";
import { Nav, Navbar } from "react-bootstrap";
const NavBar = () => {
return (
<React.Fragment>
<Navbar sticky="top" color="dark">
<Navbar.Brand href="#home">LOGO</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#about">ABOUT</Nav.Link>
<Nav.Link href="#community">COMMUNITY</Nav.Link>
<Nav.Link href="#location">LOCATION</Nav.Link>
<Nav.Link href="#menu">OUR MENU</Nav.Link>
<Nav.Link href="#recipes">RECIPES</Nav.Link>
</Nav>
<Nav className="ml-auto">
<Nav.Link href="#contact">CONTACT</Nav.Link>
<Nav.Link href="#login">LOGIN</Nav.Link>
</Nav>
</Navbar>
//ISSUE
<Nav className="middle-navbar">
<Nav.Link href="#">One</Nav.Link>
<Nav.Link href="#info" className="ml-auto">
REQUEST INFO
</Nav.Link>
</Nav>
//ISSUE
</React.Fragment>
);
};
export default NavBar;
And the Home:
import React from "react";
import { Container } from "react-bootstrap";
const Home = () => {
return (
<Container fluid id="home-container">
<h1>THE BEST FOODIE</h1>
<h1 id="foddie-title">EXPERIENCE</h1>
<h6>NOW IN LONDON</h6>
</Container>
);
};
export default Home;
And SCSS:
#import "_mixins";
#font-face {
font-family: "din";
src: local("din"), url(../fonts/DIN.ttf) format("truetype");
}
* {
font-family: "din", sans-serif;
}
//NAVBAR
.middle-navbar {
position: relative;
top: 50vh;
}
//HOME
#home-container {
background: url("../img/bg-pic.png");
background-size: cover;
font-size: 100em;
height: 100vh;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Any help would be excellent :)