"hr" element not centering in my webpage

"hr" element not centering in my webpage
0

#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:


#2

The h1, h3, hr elements are all centered. What is not centered with your current solution are each of the divs with class=“row”. Bootstrap’s row class has some predefined left-margin. I am not an expert on Bootstrap, but a simple “fix” which would apply you could apply would be to redefine the left margin for the row class like below:

.row {
  margin-left: 0px;
}

Keep in mind, that the above could have some side effects if you use row in other ways throughout your project.

FYI - I noticed you use the same CSS properties for each of the photos. You could reduce several lines in your CSS (all of the individual css for each id - i.e. #shiva-img ) by creating a class called photo like below and adding class=“photo” as an attribute to each of the images. Having just the one class makes it easier to change all the photos’ properties without having to change each id’s. Plus, unless you need it somewhere else in your code you could remove the id attribute from each image by going this route.

.photo {
  width: 80%;
  margin-left: 10%;
  padding-top: 5%;
  padding-bottom: 5%;
} 

#3

One more thing I noticed about your code is that you are using the same id value for multiple divs. Valid syntax is there should only be one id of the same name per the document. It does appear to work in Chrome, but since it is not valid syntax, it may not work on all browsers (especially older ones). When you want multiple elements to have the same css properties, use a class instead.

As it applies to your code, in your css you would replace:
and in your css, you would replace:

#content-row{
  background-color : rgb(114, 112, 111);
  margin-top: 20px;
  width: 100%;
}
#description-container{
  align: left;
  margin: auto;
}

with the folowing:

.content-row{
  background-color : rgb(114, 112, 111);
  margin-top: 20px;
  width: 100%;
}

.description-container{
  align: left;
  margin: auto;
}

and in your html, you would replace:

<div class="container" id="content-row">
  <div class="col-md-6" id="description-container">

with the following:

<div class="container content-row">
  <div class="col-md-6 description-container">

You may have other situations like the above which you should review and change, but these were the ones I spotted during a quick review of your code.


#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.