Shrink the inner container of a section?

If you give the section a class, you could do this:

.my-section-class > div {
    max-width: 70%;
    margin: 0 auto;
}

For some reason this didn't work. I put "my-section-class" in the custom class field in the section that I was targeting but it still didn't work.
Did I do something wrong? Thanks for your help.

Can you provide a link to your site so we can have a look? Thanks!

The link for this issue is the same as the link for the other private email. Thanks!
Basically I want to adjust the size of section containers but this CSS code above didn't work for that for some reason.

Can you try re-copying and pasting the code above? It looks like something went wrong and some characters were converted the last time you pasted.

Let me know :)

I tried it and it works --- but I have a question

If I want the width to be smaller, do I change the 70% to xx% that is smaller?

Or do I change margin attribute to something besides 0 auto

.my-section-class > div {
max-width: 70%; <----
margin: 0 auto; <----
}

Modify the percentage should work.

Wait actually it doesn't work

Am I supposed to find the section and under settings > Custom Classes > put the title .my-section-class?

.my-section-class > div {
max-width: 70%;
margin: 0 auto;
}

Add the class in without the dot: my-section-class

I think max width works on desktop but not on mobile because it becomes full screen which is fine.

Is there a minimum width or a fixed width setting as well?

Or maybe I need to use margin?

There is min-width and width for fix width. Wouldn't recommend using though as I don't think they would be responsive.

You can target mobile with CSS like this though:

@media (max-width: 768px) {
    .my-section-class > div {
        max-width: 70%;
        margin: 0 auto;
    }
}

Hm... not sure it's working. I found this code - This kinda works but I don't know how to make one part of the section ".outer" and one part of the section ".inner".

https://www.sitepoint.com/css-center-position-absolute-div/

.outer {
position: relative;
width: 40%;
height: 120px;
margin: 20px auto;
border: 2px solid #c00;
}

.outer {
position: relative;
width: 40%;
height: 120px;
margin: 20px auto;
border: 2px solid #c00;
}

.inner {
position: absolute;
width: 100px;
height: 100px;
top: 10px;
left: 50%;
margin-left: -50px;
background-color: #00c;
}

Sorry I'm little confused what you are trying to achieve here?

The code should work for mobile...Can you try clearing browser cache maybe?

It turns out that it worked when I called the section directly for example

#generate-section-4 .generate-sections-inside-container {
background-color:rgba(63,96,119,0.5);
max-width: 30%;
margin: 0 auto;
}

Thanks!