Change width of a card in HTML - html

Question

I'm a beginner to HTML and I'm making my first website.
.header {
text-align: center;
color: #ffffff;
font-family: tahoma;
}
body {
background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
background-attachment: fixed;
}
.img {
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10px;
color: #ffffff;
width: 500;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
color: #ffffff width=500;
}
<div class="card">
<p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
<div class="container">
<h2 class="header">Hi, I'm rappatic.</h2>
<p class="header">I code when I feel like it.</p>
<p> </p>
</div>
</div>
As you can see, when it is run, the code shows a card that goes across almost the full width of the page. I think this is kind of ugly, though. Is there a way to make the card only stretch across, say, 50 or 60 percent of the page? Or, if that's not possible, make a set amount of pixels?
Thanks in advance.

Answer 1

You are simpy missing the unit in the value of the width so you have to do this :
width: 500px;
.header {
text-align: center;
color: #ffffff;
font-family: tahoma;
}
body {
background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
background-attachment: fixed;
}
.img {
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10px;
color: #ffffff;
width: 500px;
margin: auto;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
color: #ffffff;
}
<div class="card">
<p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
<div class="container">
<h2 class="header">Hi, I'm rappatic.</h2>
<p class="header">I code when I feel like it.</p>
<p> </p>
</div>
</div>
And if you want 50% you have to simply make it width:50% and you may add margin:auto for centering
.header {
text-align: center;
color: #ffffff;
font-family: tahoma;
}
body {
background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
background-attachment: fixed;
}
.img {
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10px;
color: #ffffff;
width: 50%;
margin: auto;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
color: #ffffff;
}
<div class="card">
<p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
<div class="container">
<h2 class="header">Hi, I'm rappatic.</h2>
<p class="header">I code when I feel like it.</p>
<p>&nbsp</p>
</div>
</div>

Answer 2

for center this card use this code in your .card section:
margin-left:auto;
margin-right:auto;

Answer 3

To set the width of something, you can use the width property:
width: 500px;
width: 50%;
width: 50vw;
There are different units you can use, such as px (pixels) % (percentage of page width) and vw (percentage of window width). There may also be others, but those are the ones I know of.