What should i do here?

Say i have a container inside my body element that i set a max width of 800px.

should i also set width to 100% ?

like here’s the code:

body {
  background-color: blue;
}

.container {
  max-width:800px;
  width:100%;
  background-color: orange;
}

what will i see here if in scenario 1 i set width:100%. and in scenario 2 where i dont write it.

whats the correct way to proceed here?

try, what difference do you see?

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

i didnt see any. seems like the parent dictates the percentage of the container width? 50% gets me to 50% of the size.

so i guess all i need to is mix them.

like, if i go 50% width in the container, then set max width at 800px, no matter how big the 50% is, if its bigger than 800px, the container will stop at 800px width because i set it so.

right?

that’s correct, max-width will do that
you can also obtain similar with width: min(800px, 50%)

1 Like