Link to my codepen: http://codepen.io/NerdBurglur/pen/mOLBRz?editors=1100
Ive used a lot of new (to me) concepts and tools trying make a portfolio page… still plain by any means but ive found myself kind of turned around and lost.
I just want to line the images/links next to one another in a HORIZONTAL line… I have the section marked off between lines 77 and 95. I have 3 of the same image links and descriptions as placeholders i plan on changing them once they are aligned.
Ive already spent a good few hours trying different things and no luck… either they just dont work or the images end up behind the background image. I feel like ive forgot all the previous lessons by straining my brain trying to utilize new ideas.
Thanks for any help.
A quick inspection via Chrome dev tools revealed this to be the issue:
On the div above the “Thanks!” comment, you have two text-align properties. An important thing to note is that CSS (which stands for cascading style sheets) has rules of precedence - that is, if you define two of the same properties on the same element in a stylesheet (when they’re in different places - i.e., one is inline in HTML and one is in stylesheet, it gets a little more complicated), whichever rule comes last will be the one that is applied. So, in your case, your div was taking on text-align: justify instead of text-align: center. If you were to put text-align: center after text-align: justify, that would still work. (Although definitely not recommended - I really can’t ever see a reason why you’d want to have two of the same attributes on an element…)
For those who are new to CSS, I always always always recommend two things that will make your life much, much easier: learning how to use dev tools, and learning basic CSS principles. For the sake of not repeating myself (Don’t Repeat Yourself - DRY - is a famous coding principle that you’ll almost certainly come across in the future!), I’ll link to a reply I gave someone recently about them.
Let me know if you have any other questions! 
(Also, for the record, your debug link [which I talk about in that post] for this specific project can be found here. Take note for the future!)
1 Like
Thanks for the response Beth! Coincidentally i was just reading another reply you wrote pertaining to BootCamps. Thanks for being so active as well =) .
Like i mentioned i got a bit turned around and tried multiple things in multiple places and probably left a mess in there.
Definitely going to read your link. I am trying to deduce the solution to my problem from your answer still… Should i remove one or the other of the text align attributes? I feel like i messed with those and things got weird…
removing the text-align: justify just moved them to center in the same vertical line.
removing the text:align: center didnt do anything that i noticed.
Maybe my verbiage in describing what i wanted was off… i just want them all in a horizontal row.
I don’t have much time these days, but I try to do what I can with the time I do have. 
What it comes down to: yes, you should only have one text-align attribute in that specific div. I can’t ever see a reason you’d want multiple. If, for whatever reason, you do have multiple on the same element (in this case, the div), whichever one comes last on the stylesheet* is the one that’s going to be done. (Hence, why text-align: justify is what happens and not your first one. That’s also why it’s kind of useless to have two - if only one’s going to work, you might as well use that one, right?)
What the picture essentially means - which I may not have actually explained, my apologies for that - in Chrome dev tools, you have the ability to uncheck CSS attributes, to make it appear as if they didn’t exist. I simply unchecked text-align: justify, which means that that rule is taken out of your style complete. And then voila, things were centered.
*Again, depending on the source of the attribute, this may not always be the case. But it is when you have the same attribute applied to the same element in a stylesheet. I’ll let you look up the other precedence rules on your own.
1 Like
Yes, removing the text-align: justify moves them to center… but they are still on top of one another and not next to one another. I feel so silly not being able to relay what it is that i am looking for… i want them to be side by side… not one top of one another. What would be the correct way to relay that in the future?
Ah! I didn’t realize that was what you were going for. When you said “horizontally align,” to me, that meant aligned in the center horizontally speaking. I’d have said I’d wanted them all in the same row in a grid, instead of on their own rows. (And then within the grid, they can be centered, or left-justified, or right-justified, or what have you.) (To come up with that terminology though, you’d have to know what grids are and how they work!)
So, there are three primary ways to do that:
- Use an HTML table. I think this is sometimes considered the “old-school” way, but hey, it works, and it’s not that complicated. (As far as I know, this doesn’t give you any responsiveness, so that’s something to keep in mind.)
- Implement your own “grid” system. You do need to know some about CSS to be able to do this, but definitely not a bad thing to learn how to do!..eventually.
- The easiest way, and the way most people go about it, is to use a framework. Bootstrap is probably the most popular, but there are quite a few alternatives. Here’s a link to Bootstrap’s documentation on its grid system, and here’s an article that I quickly found via Google that may or may not be helpful but looks maybe sort of useful. If it turns out that it’s not actually that useful (I didn’t read it really, just skimmed it…), a Google for something along the lines of “how to use Bootstrap grid” might help!
Take a look at all of that and try implementing it yourself - if you still have questions after you’ve tried, let me know!
P.S. - I know that Bootstrap version 4 is in beta? (I think it’s in beta, at least?) And most of the resources out there will be for Bootstrap version 3. I can’t tell you what the differences are (which probably isn’t a good thing…sigh), but just be wary of that, when you’re reading about it. I believe I linked to you the version 4 documentation, but you can find the version 3 documentation without much trouble.
1 Like
This is not happening now because divs are block elements.
Usually if you want to make your projects side by side you would use a grid framework (such as bootstrap or foundation) - then it also would let you to make your site responsive.
1 Like
Thank you for literally holding my hand through it. (and also for the correct verbiage) Im gonna go figure it out now with the links you provided.
Thanks for that =)… im just going down the map freecodecamp provided… i did the beginner HTML/CSS and got to the basic front end dev projects and just crapped the bed when trying to implement it. Trying to stick to the order provided. Looks like i need to dip into bootstrap.
ok… funny enough i just went in to try and implement the grid… i erased <div id="image"> and they lined up just how i wanted without me having to do anything? Im happy but confused haha
Like @svmi3195 said (and I completely forgot about the surrounding divs until that), divs are block elements. This means they’ll “clear” their entire row, so no other element can be on the same row. Images, however, are not. Recommended Googling: display block vs inline vs inline-block.
Yes, it works, however, if you make your screen really narrow (to emulate being on a phone or tablet), it’s probably not going to look great. This is really where the grid framework comes into play - using a framework will make it easy for your grid (your real grid, and not what appears to be a grid right now) to be responsive to different screen sizes.
But if you’re just worrying about desktop, which is typically considered bad practice because of the enormous presence of mobile devices in our world today, yes, taking the images out of their own divs works just fine.
1 Like
oh i already know it doest look good on a phone… im just trying to get it done for the sake of sanity and go back and fix it once i can tell my elbow from my nose in “code-speak”
Haha that’s fair! Certainly don’t stress about making your projects perfect the first time around - I went down a rabbit hole for a long while with my weather app and you can spend soooo much time on any project if you don’t give yourself a “okay it’s done, it works, move on” point. Especially for portfolios, a lot of people like to come back to it after they’ve learned a lot more and spruce it up with all of their new skills.
1 Like
thats the plan! i think im finished for the time being =) … i got them in a row horizontally. I just linked my navbar… now its time for ice cream. Good night and seriously… thank you again. Im amazed at the kindness and helpfulness of people here and cant wait to reciprocate in the future!
2 Likes
Good call on the ice cream. 
best of luck, and I can’t wait to see what you build!
