Hello,
i need help with the final instruction:
Finally, within the same CSS rule, set the display to block. This will instruct the images to behave as block-level elements and facilitate scaling (as opposed to their default inline behavior).
.image-container {
overflow:hidden;
max-width:100%;
height:auto;
display: block;
}
I changes the display property but i get an error message.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Bana's Travel Blog</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
This file has been truncated. show original
style.css
/* Universal Styles */
html{
font-size: 16px;
}
body {
background-color: white;
}
.image-container {
This file has been truncated. show original