Not able to complete first project of CSS

Why the image is not fitting to the screen size , I tried everything I knew .

https://codepen.io/shubham10200/pen/bPaJrN?editors=0100

Image should look like `

https://codepen.io/freeCodeCamp/full/zNqgVx

Where is the problem ? Please help

`

Put the <img> tag between <center> tags would make it.

<center>
    <section class="heading">
        <div id="main">Dr. Norman Borlaug</div>
        <div id="description"> The man who saved a billion life </div>
    </section>
    <div id'img-div=""> <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
        <div id="img-caption"> Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>
    </div>
</center>

Deleting the <center> tags might be better, but I’m not sure.

1 Like

Problem solved :slight_smile:
but still confused is there any alternative other than center tag to do the same ?

Sure there is, I found this days ago, hope it helps.
http://learnlayout.com

Don’t use <center> it is a deprecated element and you don’t need it. Being able to center elements is vital CSS knowledge.

Here are some different centering techniques
https://codepen.io/lasjorg/pen/aPbLge

css-tricks

Hey Shubham10200, It’s so easy task it’s setting of margin for that ul tags you can apply margin for that ul tag.

Use your creativity and design that project.

Hope this help you. Happy Coding…!:blush:

You can use max-width and margin: auto.

ul {
  max-width: 560px;
  margin: auto;
}

I gave another response in your other thread.