Unable to create spaces between cards in HTML CSS

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 :slight_smile:

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';

    <div className="container">
      <div className="row">
          <div className="noteClass col-6 col-md-3 mx-auto">
            <Note key={note.key} heading={note.heading} desc={note.desc}></Note> 
  </div>, document.getElementById("root")


html, body{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: 'Raleway', sans-serif;
    background-color: yellow;
    min-height: 90px;
    width: 100%;
    margin-top: -20px;    
    padding: 20px;
    background: linear-gradient(#ffeebb, #ffeeaa);
    width: 150px;
    height: 150px;    
    border-radius: 10px;
    box-shadow: 0 0 12px 0 red;
    padding: 8px;
    margin:20px 20px;   
    display: flex;
    background-color: #222;
    color: #fff;
    position: absolute;
    padding: 10px;
    text-align: center;    

What I want is some spaces between the cards (className=noteClass) like I am having in case of the last three cards…

Is it possible to give us a link to a working demo of your project?

sure, this is the Github link https://github.com/jdx-code/notesKeeperApp.git

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.