Why css file of one component interacted with the css file of another component in ReactJS? How to handle it?

I am trying to make a website template with Reactjs. In the Jumbotron section i make subscription form and in the home section User Entry form. But the css of one component interacted with another's one. How can i handle it? [1]: https://i.sstatic.net/Wd4OQ.png

User EntryJs:-

import React, { Component } from 'react'

import './User Entry.css'

class Form extends Component { initialState = { name: "", age: "", job: "" } state = this.initialState

changeHandler = event => {
    const { name, value } = event.target
    this.setState({
        [name]: value
    })
}

render() {
    const { name, job, age } = this.state
    return (

        <form className="form-inline">
            <div className="row">
                <div className="col-md-3">
                    <div className="form-group">
                        <label htmlFor="name">Name:-</label>
                        <input type="text"
                            className="form-control"
                            name="name"
                            id="name"
                            value={name}
                            autoFocus
                            onChange={this.changeHandler} />
                    </div>
                </div>
                <div className="col-md-3">
                    <div className="form-group">
                        <label htmlFor="age">Age:-</label>
                        <input type="text"
                            className="form-control"
                            name="age"
                            id="age"
                            value={age}
                            autoFocus
                            onChange={this.changeHandler} />
                    </div>
                </div>
                <div className="col-md-3">
                    <div className="form-group">
                        <label htmlFor="job">Job:-</label>
                        <input type="text"
                            className="form-control"
                            name="job"
                            id="job"
                            value={job}
                            autoFocus
                            onChange={this.changeHandler} />
                    </div>
                </div>
                <div className="col-md-3"></div>
            </div>
        </form>

    )
}

}

export default Form

Header JS:-

import React, { Component } from 'react'

import './Header.css' import { Link, withRouter } from "react-router-dom";

class Header extends Component { constructor(props) { super(props)

    this.state = {
        email: ""
    }
}

submitHandler = event => {
    event.preventDefault();
    alert(`Subscribed Email is : ${this.state.email}`);
}

changeHandler = event => {
    this.setState({
        email: event.target.value
    })

}


render() {
    return (
        // Navbar Starts 

        <div>
            <div className="row navbar">
                <Link to="/" style={{textDecoration:'none'}}><div className="col-md-2 logo">ReactApp</div></Link>
                <div className="col-md-6"></div>
                <Link to="/" style={{textDecoration:'none'}}> <div className="col-md-1 link"> Home</div> </Link>
                <Link to="/about" style={{textDecoration:'none'}}> <div className="col-md-1 link"> About</div> </Link>
                <Link to="/counter" style={{textDecoration:'none'}}> <div className="col-md-1 link"> Counter </div></Link>
                <Link style={{textDecoration:'none'}}><div className="col-md-1 link">Login</div></Link>
            </div>

            <div className="jumbotron text-center">
                <h1>React-App</h1>
                <p>We specialize in <strong>Web Development</strong></p>

                {/* Subscribing form starts*/}
                <form className="form-inline subscribingForm" onSubmit={this.submitHandler}>
                    <div className="input-group">
                        <input type="email"
                            className="form-control"
                            value={this.state.email}
                            onChange={this.changeHandler}
                            size="80"
                            placeholder="Email..."
                            required />
                        <div className="input-group-btn">
                            <input type="submit" value="Subscribe" className="subscribingBtn" />
                        </div>
                    </div>
                </form>
                {/* Subscribing form closes*/}
            </div>
        </div>

    )
}

}

export default withRouter(Header);