I am a beginner in HTML/CSS and I am having some trouble centering some text in my program. Right now, I have created a box and I have centered the header “Ingredients” inside of that box. I am trying to align the paragraph underneath that header to the left so that it’s not in the center, but I can’t figure out how to do that without messing up my page or the div tags. I have been looking for a solution to this for the past 30 minutes and I can’t seem to figure out what I am doing wrong or what I need to add. Can someone help?
I think you want p to be inside col based on my understanding you want the text below the title to be left-aligned but not all text.
If you’re gonna make css changes to an element, it’s always best practice to be as specific as you can so that you reduce the chance of unintended side efects (other elements / style / interface changes that are unwanted). By being specifc about the p tags inside col classes, you protect your other p tags from change.
I tried putting p inside of col again, but I don’t know how to change <p>Hello there. Here is my first recipe for today.</p> so that it corresponds to the col class. Is there something that I have to add to that paragraph?
<p>Hello there. Here is my first recipe for today.</p>
The paragraph still isn’t aligning to the left side of the box/container. I think what’s messing it up is that I have center tags around the initial div tags, but I used the center tags in order to center the container.
aside from being a better practice, being specific about styling elements / passing properties is important for when you’re interested in transferring a property (width) from a parent to a child. I assumed you wanted to pass the width to the child element but as you can see, inheriting properties can be tricky and can require foresight / debugging when unintended results are rendered.