Hello all, I am working on a React app where in the design part is giving me some issues or I am not being able to understand well. I have been trying to figure out reasons for which I am not being able to create spaces between the custom cards that I have created in my application. Below is the screenshot of the output I am getting at the moment :
Also I am sharing my code below 
index.js
import react from "react";
import reactdom from "react-dom";
import Header from "./Header";
import Note from "./Note";
import Footer from "./Footer";
import NotesInfo from './NotesInfo';
reactdom.render(
<div>
<Header></Header>
<div className="container">
<div className="row">
{NotesInfo.map((note)=>(
<div className="noteClass col-6 col-md-3 mx-auto">
<Note key={note.key} heading={note.heading} desc={note.desc}></Note>
</div>
))}
</div>
</div>
<Footer></Footer>
</div>, document.getElementById("root")
);
styles.css
html, body{
margin: 0px;
padding: 0px;
box-sizing: border-box;
overflow-x: hidden;
}
body{
font-family: 'Raleway', sans-serif;
}
header{
background-color: yellow;
min-height: 90px;
width: 100%;
margin-top: -20px;
padding: 20px;
}
.noteClass{
background: linear-gradient(#ffeebb, #ffeeaa);
width: 150px;
height: 150px;
border-radius: 10px;
box-shadow: 0 0 12px 0 red;
padding: 8px;
margin:20px 20px;
overflow:scroll;
display: flex;
justify-content:space-around;
}
footer{
background-color: #222;
color: #fff;
position: absolute;
bottom:0;
padding: 10px;
text-align: center;
width:100%;
height:50px;
}
What I want is some spaces between the cards (className=noteClass) like I am having in case of the last three cards…