Child div is not fitting properly with parent div element

Question

Hi 

 

I am working on one web application where using html, css and react. Currently i am encountering below issue. Kindly help me sort out this one.

 

Issue: Image is not fitting with div element. 

 

Code Part:

 

<Router>

<div className="App">

<Header/>

<div className='container'>

<Route exact path='/' component={Home}/>

<Route exact path = '/register' component={X}/>

<Route exact path = '/Login' component ={Y}/>

</div>

<Footer/>

</div>

</Router>

 

 for Home Component:

import '../../Style/Home.css';

class Home extends Component {

render() {

return (

<div className="landing">

</div>

)

}

}

img{

width: 100%;

height: 100%;

}

.landing

{

position: relative;

background: url('../Images/weights-desktop-wallpaper.jpg') no-repeat;

background-size:cover;

height:100vh;

width: 100%;

overflow: hidden;

}

 

Out Put:(Middile part[Between Header and Footer] of the page)