Help Please - Adding CSS BG Color Call Changes Text Alignment

HTML-CSS
1

Hello!
I’m new here, so please forgive me if I’m in the wrong subforum. I’ve searched for previous threads regarding my issues, but I did not find anything.

I’m very grateful for any help you can provide.

Maybe someone can help me understand what I’ve done wrong. I added a line to my CSS to change the page BG color, which it does, but it also changed the page alignment.

Here is a “before and after” image of the page. On the left is the original page with correct alignment and no BG color. On the right is the page after adding a BG color CSS call - the page alignment ignores the CSS alignment call:

Untitled-1
Untitled-11206×428 58.8 KB

This is the CSS without the CSS BG color call:

<style>
body
{
	text-align: center;
}

div#container
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	text-align: left;
}
</style>

This is the CSS with the BG color call:

<style>
body
{
  background-color: b2b1b1;
}
{
	text-align: center;
}

div#container
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	text-align: left;
}
</style>

Thank you in advance for any assistance and guidance you can share.

Regards,
RR

2

SOLVED!
I just figured out my problem…

I removed the BG Color call from the CSS and turned it into an inline call on the BODY TAG:


<body style="background-color:b2b1b1;">

Works perfectly! The background color is now the new color and the elements on the page are aligned properly.

Sorry for the trouble!

Thank you!
RR

3

look at the text-align: center in the second style.your problem is there.find it!:wink:

4

Hi @Ruthyruth, that’s not a good way to solve it though. You should stay away from inline styling and stick with external styling.

The reason you saw a problem was because you removed the property and value text-align: center; from the body declaration. It’s in a set of curly braces but assigned to nothing.
As you did in your div#container declaration, you have more than one set of property and value. That’s all you need to do with the body.

So it should be;

body {
  background-color: #b2b1b1;
  text-align: center;
}

As an aside, b2b1b1 isn’t a color. It needs to be specified as #b2b1b1