I am struggling with styling of the image. The image and its container is having a lot of empty space in between. How can i reduce the distance to few px so that the image and caption are contained well in a card like structure and the entire thing is centered in the page?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Sample Survey form</title>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<header id="title">
<h1>Dr. A.P.J Abdul Kalam</h1>
<h3 id="desc">11th President of India</h3>
</header>
<figure id="img-div">
<img id="image" src="https://www.apjabdulkalamfoundation.org/images/about/profile%20images.jpg">
<figcaption id="img-caption">Dr APJ Abdul Kalam </figcaption>
</figure>
<section id="tribute-info">
<h3>About Him</h3>
<p>Born on 15th October 1931 at Rameswaram in Tamil Nadu, Dr.Avul Pakir Jainulabdeen Abdul Kalam specialized in Aeronautical Engineering from Madras Institute of Technology. Dr. Kalam made significant contribution as Project Director to develop India’s first indigenous Satellite Launch Vehicle (SLV-III) which successfully injected the Rohini satellite in the near earth orbit in July 1980 and made India an exclusive member of Space Club.</p>
</section> <section>
<h3>His Life As A Scientist</h3>
<p>He was responsible for the evolution of ISRO's launch vehicle programme, particularly the PSLV configuration. After working for two decades in ISRO and mastering launch vehicle technologies, Dr. Kalam took up the responsibility of developing Indigenous Guided Missiles at Defence Research and Development Organization as the Chief Executive of Integrated Guided Missile Development Programme (IGMDP). He was responsible for the development and operationalisation of AGNI and PRITHVI Missiles and for building indigenous capability in critical technologies through networking of multiple institutions. He was the Scientific Adviser to Defence Minister and Secretary, Department of Defence Research & Development from July 1992 to December 1999. During this period he led to the weaponisation of strategic missile systems and the Pokhran-II nuclear tests in collaboration with Department of Atomic Energy, which made India a nuclear weapon State. He also gave thrust to self-reliance in defence systems by progressing multiple development tasks and mission projects such as Light Combat Aircraft.</p>
</section>
<section><h3>His Legacy</h3>
<p>Dr Kalam left behind an inspirational life that will serve as a guiding beacon of hope for generations of Indian youth.His views are duely recorded in the several books he authored throughout his lifetime. </p></section>
<section></section>
<footer><p>"Winners are not those who never fail but those who never quit.
<span>-Dr A P J Abdul Kalam.</span></p><p>If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam#Legacy" target="_blank">Wikipedia entry</a>.</p></footer>
</main>
</body>
</html>
/* file: styles.css */
body{
margin:0;
padding:0;
box-sizing:border-box;
}
main{
width:60%;
margin:5% auto;
background-color:#EEEEEE;
border-radius:5px;
display:flex col;
}
h1{
padding-top:8%;
padding-bottom:0.5%;
}
h1,#desc{
text-align:center;
}
figure{
width:auto;
display:flex col;
align-items:center;
background-color:white;
padding:0;
object-fit:cover;
}
img{
padding:5px;
display:block;
margin-left:0;
margin-right:0;
}
#img-caption{
text-align:center;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge:
