I recently started my journey with freecodecamp a few days ago. I encountered my first project which required me to create a tribute page for anyone in the world. The page needed to include a picture, some text, and a link to an external site.
However, I've been facing an issue with the image placement. In some views, it appears centered and visually appealing. But in other views, it becomes oversized and shifts to the right. I've tried various solutions but nothing seems to work. Below is the HTML and CSS code I have written:
#elonRocket {
border-radius: 80%;
border-style: solid;
border-width: 10px;
}
h1 {
font-size: 64px;
}
.mainInfo {
text-align: center;
margin: 5;
}
.entryTitle {
padding-top: 100px;
font-weight: bold;
}
.mainEntry {
background-color: #acb2b7;
border-style: dashed;
}
#closing {
text-align: center;
padding-top: 150px;
}
<div class="container">
<div class="jumbotron">
<div class="col-xs-12">
<div class="page-header">
<h1 class="text-center page-header" style="font-family: Audimat"><strong>Elon Musk</strong></h1>
</div>
<h2 class="text-center"><em>beating the odds</em></h2><br>
<p style="text-align:center"><img src="http://fossbytes.com/wp-content/uploads/2016/01/space-x-elon-musk-.jpg" id="elonRocket" alt="Elon Musk standing in front of Falcon 9"></p>
<div class="mainInfo">
<h2 class="entryTitle">Who is he?</h2>
<p class="mainEntry">Elon Reeve Musk (born June 28, 1971) is a South African-born American entrepreneur and businessman who founded X.com in 1999 (which later became PayPal), SpaceX in 2002 and Tesla Motors in 2003. Musk became a multimillionaire in his late 20s
when he sold his start-up company, Zip2, to a division of Compaq Computers. Musk made headlines in May 2012, when SpaceX launched a rocket that would send the first commercial vehicle to the International Space Station. He bolstered his portfolio
with the purchase of SolarCity in 2016, and cemented his standing as a leader of industry by taking on an advisory role in the early days of President Donald Trump's administration.</p>
<h2 class="entryTitle">What was his childhood like?</h2>
<p class="mainEntry">During his childhood he was an avid reader. At age 10, he developed an interest in computing with the Commodore VIC-20. He taught himself computer programming at the age of 12, sold the code of a BASIC-based video game he created called Blastar,
to a magazine called PC and Office Technology, for approximately $500. A web version of the game is available online. His childhood reading included Isaac Asimov's Foundation series from which he drew the lesson that "you should try to take
the set of actions that are likely to prolong civilization, minimize the probability of a dark age and reduce the length of a dark age if there is one."</p>
<h2 class="entryTitle">Where is he headed?</h2>
<p class="mainEntry">Elon Musk has a lot of life goals, far more than must of us could even fathom. He has made some of his goals public, but I feel as though there is a lot more going on in his intelligent brain.
</div>
<div class="mainEntry">
<ul>
<li>Create stunning solar roofs with seamlessly integrated battery storage</li>
<li>Develop a self-driving capability that is 10X safer than manual via massive fleet learning</li>
<li>Enable your car to make money for you when you aren’t using it</li>
<li>Travel to mars</li>
<li>Colonize Mars</li>
</p>
</div>
<h3 id="closing">If you'd like to know more, please feel free to visit the link <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Here!</a></h3>