Issue with Parent and Child Component Margins
import "../src/App.css";
import CardComponent from "./components/CardComponent";
function App() {
return (
<div className="App">
<div className="card"></div>
<CardComponent />
</div>
);
}
export default App;function CardComponent() {
return (
<div className="card-component-wraper">
<div> FAQs </div>
<div>
<div> What is Frontend Mentor, and how will it help me? </div>
Frontend Mentor offers realistic coding challenges to help developers
improve their frontend coding skills with projects in HTML, CSS, and
JavaScript. It's suitable for all levels and ideal for portfolio
building.
</div>
</div>
);
}
export default CardComponent;* {
margin: 0;
padding: 0;
}
.App {
background-color: hsl(275, 100%, 97%);
background-image: url("../assets/images/background-pattern-desktop.svg");
background-size: 100%;
background-repeat:repeat-x;
width: 100%;
height: 100vh;
}.card-component-wraper {
background-color: hsl(0, 0%, 100%);
width: 20%;
height: auto;
border-radius: 10px;
margin-left: 40%;
margin-top: 10%;
}