<meta charset="utf-8" />
<title>Responsive Web Design Task: Task</title>
<link rel="stylesheet" href="css/RD1.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
html {
font: 1.2em/1.4 Arial, Helvetica, sans-serif;
}
body {
padding: 0 0 1em;
}
header {
background-color: #333;
color: #fff;
border: 5px solid #000;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
}
header a {
color: #fff;
text-decoration: none;
display: block;
padding: 0.5em 1em;
border-top: 1px solid #999;
}
header .title {
font-size: 150%;
font-style: italic;
font-weight: bold;
padding: 1em;
}
main {
padding: 0 1em;
}
.cards {
list-style: none;
margin: 0;
padding: 0;
}
.cards li {
border: 5px solid #000;
margin-bottom: 1em;
}
.cards h2 {
background-color: #333;
color: #fff;
margin: 0;
padding: 0.5em 1em;
}
.cards .inner {
padding: 0.5em 1em;
}
.sidebar {
background-color: #333;
border: 5px solid #000;
padding: 0.5em 1em;
color: #fff;
}
@media screen and (min-width: 70em) {
body {
display: grid;
grid-template-rows: 100px 1fr;
gap: 1em;
}
header {
display: grid;
grid-template-columns: 3fr 1fr;
}
header ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3em;
}
.cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
}
</style>
<header>
<div class="title">My Website</div>
<nav>
<ul>
<li>
<a href="">Link 1</a>
</li>
<li>
<a href="">Link 2</a>
</li>
<li>
<a href="">Link 3</a>
</li>
</ul>
</nav>
</header>
<main>
<article>
<h1>This is the main heading</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<ul class="cards">
<li>
<h2>Card One</h2>
<div class="inner">
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea
lettuce kohlrabi amaranth water spinach avocado.
</p>
</div>
</li>
<li>
<h2>Card Two</h2>
<div class="inner">
<p>
Daikon napa cabbage asparagus winter purslane kale. Celery
potato scallion desert raisin horseradish spinach carrot soko.
</p>
</div>
</li>
<li>
<h2>Card Three</h2>
<div class="inner">
<p>
Lotus root water spinach fennel kombu maize bamboo shoot green
bean swiss chard seakale pumpkin onion chickpea gram corn pea.
</p>
</div>
</li>
<li>
<h2>Card Four</h2>
<div class="inner">
<p>
Lotus root water spinach fennel kombu maize bamboo shoot green
bean swiss chard seakale pumpkin onion chickpea gram corn pea.
</p>
</div>
</li>
<li>
<h2>Card Five</h2>
<div class="inner">
<p>
Nori grape silver beet broccoli kombu beet greens fava bean
potato quandong celery. Bunya nuts black-eyed pea prairie turnip
leek lentil turnip greens parsnip.
</p>
</div>
</li>
</ul>
</article>
<aside class="sidebar">
<p>
Have you discovered all of the other excellent content on this
website?
</p>
</aside>
</main>
mikoMK
(Michael Koch)
2
Hi @anshul_rawat and welcome to the community 
Your main
and .cards
grids look fine.
Try removing the body
grid and changing header
and header ul
to flex.
Let me know if you need more help or if I shall look at an updated solution. 
Have a nice day,
Michael