bootstrap 3 полных страницы изображения с Navbar

Question

Я использую bootstrap 3 с реакции. В одном из компонентов я пытаюсь поместить полноэкранное изображение в качестве фона. Без навигационной панели изображение работает нормально и покрывает всю страницу, но с навигационной панелью изображение показывает некоторое пространство вместе с навигационной панелью сверху и снизу.

CSS

#home {
        background-image: url('../assets/img/backg.jpg');
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: space-around;
        height: 100vh;
        width: 100vw;

        padding: 0;
        margin: 0;
    }

возврат из метода рендеринга

    <div id="home" className="home">
        <div className="container">
            <div className="panel panel-primary">
                <div className="panel-heading">
                    Login Forms
                </div>
                <div className="panel-body">
                    <div className="form-group">
                        <label>Email</label>
                        <input type="text" className="form-control"
                        value={this.state.email}
                        onChange={this.handleChangeEmail}/>
                    </div>
                </div>
                <div className="panel-body">
                    <div className="form-group">
                        <label>Password</label>
                        <input type="password" className="form-control"
                        value={this.state.password}
                        onChange={this.handleChangePassword}/>
                    </div>
                </div>
                <button className="btn btn-success"
                onClick={this.handleSubmit}>
                    Submit
                </button>
            </div>
        </div>
        </div>

результат