Tribute Page Issue(centering)

Tribute Page Issue(centering)
0.0 0

#1

Hey there campers!

I’m new to coding and I really want to aspire to be a front end dev one day, anyways
I was jamming right along to the tribute page then I ran into a snag. I can’t seem to get the columns centered on the page its either too far to the left or the well takes up the entire page’s width.

If someone could point me in the right direction, the help would be much appreciated. I don’t want to break rule 1!

below is the link to my pen

Lou’s Tribute pen


#2

On line 12, you’re missing the closing angle bracket (>) on your div…I think that might be part of the problem.


#3

imo, your best direction by now is bootstrap grid documentation+practice, try .container not container-fluid(this one takes all available width) and remember that you need cols inside rows


#4

Head section is not required on codepen. Also, to make IMG responsive remove the width property and use bootstrap classes img-responsive to look it good on mobile devices.


#5

hey , first close tag on line 12 , than remove width from your image and add class of img-responsive after it call image in css section like:

img
{
display:block;
margin:0 auto;
}

this will place your image in center… best of luck.


#6

I think you made this more difficult…start simple(lol I should take my own advice). Anyway! Try this and adjust to liking… Good luck!

///HTML SECTION// Note: Delete space between <>. It was the only way I could paste the code. Thanks

< body>
< div class=“container-fluid”

< div>
< div class=“well” id=“div1”>
< div align=“center”>
< h1>Julian Assange< /h1>
< figure>
< a title=“By David G Silvers. [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons” href=“https://commons.wikimedia.org/wiki/File%3AJulian_Assange_August_2014.jpg”>


< figcaption style=“font-size: 20px;”>Hacker, Activist, Political Refugee
< /figure>
< /div>
< div class=“row” id=“div2”>
< h2>Timeline< /h2>
< ul class=“list-unstyled” style=“font-size 18px”>
< strong>Early Life < /strong>

< /body>

< /html>

////CSS SECTION///
body{
margin-top: 60px;

}
#div1 {
width: 800px;
margin: auto;
padding: auto;
}

#div2 {

padding: 20px;
}


#7

Thanks for the help guys!