Give different card element specific width size - html

Question

I am using css grid where I have a card inside a sidebar div that is inside a container dive. I am also using a inner-container div where I put 3 cards. The sidebar div card has proper width but the cards inside the inner-container do not adjust to 200px. How can I give the inner-container cards a specific width.
HTML
<aside class="sidebar">
<h2><b>Latest Blog Post</b></h2>
<div class="card">
<img class="card-image" src="images/christmas.jpeg" alt="christmas-markets" width="100%">
<div class="card-text">
<p>German Christmas Markets</p>
</div>
</div>
</aside>
<article class="main">
<h1>An American Living in Germany</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class=".inner-container">
<div class="card"><img class="card-image" src="images/pubic-transit.jpeg" alt="public-transit" width="100%">
<div class="card-text">
<p>Public Transit</p>
</div></div>
<div class="card"><img class="card-image" src="images/rothenburg.jpeg" alt="christmas-markets" width="100%">
<div class="card-text">
<p>Rothenburg ob der Tauber</p>
</div></div>
<div class="card"><img class="card-image" src="images/black-forest.jpeg" alt="public-transit" width="100%">
<div class="card-text">
<p>The Black Forest</p>
</div></div>
</div>
</article>
CSS
.card {
box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
transition: 0.3s;
width: 90%;
height: auto;
border-radius: 5px;
margin-top: 20px;
}
.card-text {
padding: 2px;
margin-left: 5px;
margin-bottom: 2px;
margin-top: 5px;
line-height: .5em;
}
.card-text a {
color: crimson;
font-size: 1.2em;
}
.card-image {
width: 100%;
bottom: 0px;
}
.inner-container {
height: 50%;
width: 80%;
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-template-areas:
"b b b";
}
.inner-container div {
grid-area: b;
}
.inner-container .card{
box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
transition: 0.3s;
width: 200px;
height: auto;
border-radius: 5px;
margin-top: 20px;
}
.inner-container .card-text {
padding: 2px;
margin-left: 5px;
margin-bottom: 2px;
margin-top: 5px;
line-height: .5em;
}
.inner-container .card-text a {
color: crimson;
font-size: 1.2em;
}
.inner-container .card-image {
width: 100%;
bottom: 0px;
}

Answer 1

You've got a typo in your code which is why CSS isn't firing for that class.
<div class=".inner-container">
should be
<div class="inner-container">
Also took the liberty of adding grid-area:auto; to css to make it render properly for you:
Working fiddle: https://jsfiddle.net/ne6vrwyq/
.card {
box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
transition: 0.3s;
width: 90%;
height: auto;
border-radius: 5px;
margin-top: 20px;
}
.card-text {
padding: 2px;
margin-left: 5px;
margin-bottom: 2px;
margin-top: 5px;
line-height: .5em;
}
.card-text a {
color: crimson;
font-size: 1.2em;
}
.card-image {
width: 100%;
bottom: 0px;
}
.inner-container {
height: 50%;
width: 80%;
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-template-areas:
"b b b";
}
.inner-container div {
grid-area: b;
}
.inner-container .card{
box-shadow: 0 8px 8px 8px rgba(0,0,0,0.2);
transition: 0.3s;
width: 200px;
height: auto;
border-radius: 5px;
margin-top: 20px;
grid-area: auto;
}
.inner-container .card-text {
padding: 2px;
margin-left: 5px;
margin-bottom: 2px;
margin-top: 5px;
line-height: .5em;
}
.inner-container .card-text a {
color: crimson;
font-size: 1.2em;
}
.inner-container .card-image {
width: 100%;
bottom: 0px;
}
<aside class="sidebar">
<h2><b>Latest Blog Post</b></h2>
<div class="card">
<img class="card-image" src="images/christmas.jpeg" alt="christmas-markets" width="100%">
<div class="card-text">
<p>German Christmas Markets</p>
</div>
</div>
</aside>
<article class="main">
<h1>An American Living in Germany</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class="inner-container">
<div class="card"><img class="card-image" src="images/pubic-transit.jpeg" alt="public-transit" width="100%">
<div class="card-text">
<p>Public Transit</p>
</div></div>
<div class="card"><img class="card-image" src="images/rothenburg.jpeg" alt="christmas-markets" width="100%">
<div class="card-text">
<p>Rothenburg ob der Tauber</p>
</div></div>
<div class="card"><img class="card-image" src="images/black-forest.jpeg" alt="public-transit" width="100%">
<div class="card-text">
<p>The Black Forest</p>
</div></div>
</div>
</article>