3-column-preview-card-component by using html and css in pycharm

First I thought it might be because you got the wrong path but you wrote <img scr="images/icon-sedans.svg">, it's supposed to besrc not scr.

Hi Angela! Here's some feedback on your solution:

1. As Thulanigamteni already pointed out, you misspelled src in your <img> tabs that's why your images doesn't show up properly.

2. You can accomplish round corners with "border-radius" CSS property. It can take one value for all four corners or a separate value for each corner, all in pixels. Make sure to use the value both in parent and child elements when needed.

Also, some further advice to improve your solution:

• Try to use the correct font family for your headers. -Try to align the elements in each of your cards to the left. Try to adjust the min-max width of your each card so you avoid the bug of them changing size when you hover over the buttons.
• It's a good practice to begin with an <h1> header and adjust the font size if necessary, using CSS. Header tags have a more semantic meaning than just declaring the size of your fonts. -Try not to use "id" especially in small projects. I know that it kinda makes sense when you have some unique elements but it takes up a lot more memory space than classes and maybe it can make things more complicated than needed. You can always specify you unique element by adding an extra class.

I hope I helped a little, very nice effort overall! Keep up the good work!

These 3 items are flex items... and you always want to keep them in a single row. So get rid of flex-wrap as that will push a single item out of the row as it does in viewport <1420px.

For rounded columns, you can use one of the below

    border-radius: 10px 0px 0px 10px;
}
.column3{
    border-radius: 0px 10px 10px 0px;
}

.flex-container>*:first-child
{
 border-radius: 10px 0px 0px 10px;
}
.flex-container>*:last-child
{
    border-radius: 0px 10px 10px 0px;
}