Alignment issue with CSS and Bootstrap

Alignment issue with CSS and Bootstrap
0

#1

I’m currently on the first front-end project and I’m having problems making my text align properly with an image at higher resolutions. Here is the codepen project: https://codepen.io/DevNeek/full/EvpbqQ/

The text aligns properly when you reduce the browser size, but at full size the bio doesn’t align with the image.


#2

I sort of solved it, the max-width was messing with alignment, I’m not sure why.


#3

Ok, so my element was offset because of the max-width (still not sure why), but doing a “margin: 0 auto;” forced my element to be centered in relation to the parent elements, then I just put that element inside a div and added back the left and right margins, now it is completely fixed :slight_smile:


#4

Glad you figured out your problem.

I just looked at your code and wondered why you are using the following in your JavaScript?:

document.getElementsByTagName("h1")[0].style.fontSize = "80px";

It would be much better to do this in CSS like:

h1 {
  font-size: 80px;
}

#5

I don’t remember putting any js yet… weird.