"hr" element not centering in my webpage

HTML-CSS
1

I am creating the last project of the “Build a Personal Portfolio Website.”

My “hr” element - the graphical line separator is not centering in regards to the webpage’s content, which is centered in rows as well. Either all the content in my webpage is not really centered and the “hr” element is, or the content is centered and I can’t get the “hr” element to center. I have tried using align: center in all the divs, enclosed the 'hr" element in a row, used it standalone, and more. Here it is stretched to 100% width and without the center attributes so you can see the non-centered position.

Note: I am referring to the second “hr” element, under the “h3” element that says, “Neighborhood Photos.”

Here is the codepen for my project:

4

Thanks, I thought that i was over typing with the image CSS properties. Double thanks for helping me solve the initial problem. I can’t stand having a bug or flaw like that and this really helps me move on!!! Many thanks good sir!

5

Triple thanks for the advice on class vs id. I see how using a class for multiple element alterations/styling is better now.