Formatting Help

I finally got the JS portion of the weather app done!!! I thought the hard part was over, but my frustration now is that I cannot get #top to center the text (h2 elements). I tried everything from margins, to padding, to trying to do col-sm-offset-2 on both the parent and child elements. The H2 elements are always stuck off to the side like they are presently.

I feel like I have a pretty good grasp of CSS and Bootstrap, but positioning always seems to give me trouble. Is the way I broke each section into rows like #Middle & #bottom advisable? What is the best way to create an outline?

Link to my Project >>> https://codepen.io/Jeco/pen/BZRoLr

You have some spacing issues in your html.

<div id = "top "class = "container-fluid row col-sm-8">

Should be

<div id="top" class="container-fluid row col-sm-8">

Note the space before class. Once I changed this, your padding worked.

But, before you run away to try it… I’d recommend a change in your code. By changing <h2 id="location"></h2><h2 id="region"><h2> to something like <h2><span id="location"></span><span id="region"></span></h2> you should be able to style it easier while still having the same JS code.

1 Like

Thank you Dave, I can’t believe it was something as simple as the space… I didn’t realize that had an impact on how the code compiles. I think I got it from here, but I really do appreciate the help, sometimes it is the smallest things that matter!