Tribute page: #layout rule 1: error

Trying to complete the project section of HTML/CSS.
Getting an error on #Layout: Rule 1.

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

My code HTML:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js">--> <!--<![endif]-->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title id="title">Albert Einstein</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script src="" async defer></script>
    <body id="main">
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>

            <figure id="img-div">
                <img src="" alt="Albert Einstein image" id="image">
                <figcaption id="img-caption">Albert Einstein picture</figcaption>
                <section  id="tribute-info">
                    <p>Albert Einstein was a German-born theoretical physicist who developed the theory of relativity, one of
                    the two pillars of modern physics.<br> His work is also known for its influence on the philosophy of science.<br></p>
                    <a href="" id="tribute-link"
                    target="_blank" tabindex="0">Albert einstein wikipedia</a>

My code CSS:

body {
    display: block;
    text-align: center;
    position: absolute;

img {
    height: auto;
    max-width: 100%;

Changing img to position: absolute fixes the first error, but doesn’t align the image anymore. I’m at a loss…
What am I doing wrong?

If you have a Codepen please post the link.

I would suggest you read the lower half of the error message, it tells you more about what the test is expecting.

1 Like

Thanks for the tip! Got 10/10 but image is not centered haha.

EDIT: fixed it, had img to absolute and not parent div


body {

    text-align: center;

    position: absolute;


img {

    height: auto;

    max-width: 100%;

    display: block;



Not sure why you would need to use position absolute on the body? Generally speaking, that doesn’t seem like a great idea.

But if it’s passing and you are happy with the result, then I guess it doesn’t really matter.

1 Like

It had me confused too, but also annoyed that the other methods didn’t pass the test.