I really can’t figure out why the bottom questions don’t have the same alignment as the upper ones. The html is the same. Please help
Because you’ve accidentally nested your
In codepen, click the arrow on line 53
<div class="rightTab">. You’ll see that it encloses the
.rightTab class on line 65.
So your css for line 65 is basing it’s position from it’s parent at line 53.
Yes, nesting is part of the problem.
There is also a problem with your html. I count 27
<div> and 23
I know it gets confusing. A lot of times I put comments at closing elements to help me keep track of what it is closing, if it is far away. Also, codepen will auto indent your html - select all (ctrl-a) then shft-tab. If you go to the bottom, it is obvious there is a problem.
I forgot to add, if you want to see exactly what the browser is rendering, then use your devtools.
In chrome you right click --> inspect. Then in the panel that opens up, you select the elements tab.
Finally, at the top left of the panel is an icon with an arrow. If you click that, you can then hover your mouse pointer over the page and it will highlight elements for you and show the padding and margins.
If you click the element, it will select the dom node for you so you can inspect it’s css and mark up.
From there, you can live edit the css on the right in the styles column under the element.style block. This block overrides the page’s css.
Thank you both so much for all the advice. It is confusing indeed, mostly because in the challenges not everything was covered, so there are many things I have to google, and in the end I am not even sure I am doing it right.
Yes, not everything is covered. FCC is not comprehensive. But this is a good thing because it teaches you to find the answers. In the real world, your boss isn’t going to tell you to do something and then give you a bunch of tutorials on how to do it, you’re just going to have to figure it out. It’s impossible to know everything in web dev and it keeps changing - researching is part of the job.