Margin and padding problems

import React from "react";//import { render } from "react-dom";

//import {Container} from 'mdbreact'

//import { Button, Card, CardBody, CardImage, CardTitle, CardText, CardGroup } from 'mdbreact';

//import {Row, Col} from 'mdbreact'

//import {View, Mask, Animation, Fa} from 'mdbreact'

const EventHandler=(props) => (

<div className="container">

<div className="row">

<div className="col green">

One of three columns

</div>

<div className="col green">

One of three columns

</div>

<div className="col green">

One of three columns

</div>

</div>

</div>

)

export default EventHandler

import 'font-awesome/css/font-awesome.min.css';

import 'bootstrap-css-only/css/bootstrap.min.css'; 

import 'mdbreact/dist/css/mdb.css';

import React from 'react';

import ReactDOM from 'react-dom'; 

import { BrowserRouter as Router } from 'react-router-dom';

//import registerServiceWorker from "./registerServiceWorker"

//import AppPage from './AppPage';

//import App from './Parall_1';

//import App from './App'

//import NavbarFeatures from './Navigation'

//import App from './Paginator';

//import BasicExample from "./Router_ex"

//import App_1 from "./TestProps"

//import Main from "./Main"

//import MdbPro from "./MdbPro"

//import EventHandler from "./Event"

import EventHandler from "./Ev_han"

//registerServiceWorker();

ReactDOM.render(

<div>

{/*

<Router> 

<Main/>

</Router>

*/}

<EventHandler/>

</div>

, document.getElementById("app"));