Page Having No Margin Topic is solved

[etpourquelque27]

There is one page on my site having no left and right margins regardless of browsers used. If I set the row to "Fluid" in backend or include CSS padding within "Addon", the page is still not formatted. In order to view the problem, please click on FYI link in main menu. An image is attached as illustration.
Gratitude is offered in advance for your support.

page-1.jpg

[toivo]

In order to view the problem, please click on FYI link in main menu.

What is the URL of this website?

[etpourquelque27]

I hope you don't mind if I send it to you privately?

[toivo]

Please don't.

[etpourquelque27]

Sorry, I send it by accident before I read your last message.

[etpourquelque27]

Did you mean: "You don't mind", or "Don't send it"?

[toivo]

I meant "Don't send it" - support and assistance here should be open to every member of the forum.

[etpourquelque27]

Thank you for your enlightenment.

[etpourquelque27]

Here is the complete CSS of the FYI page.

.sp-simpleportfolio .sp-simpleportfolio-filter {
text-align: left;
margin-bottom: 43px;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li {
margin: 0;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a {
font-size: 16px;
color: #222;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
display: inline-block;
cursor: pointer;
position: relative;
padding: 0 15px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
background: transparent;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a {
color: #19B861;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a:hover {
color: #19B861;
}

.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper .sp-simpleportfolio-overlay {
background: rgba(25, 184, 97, 0.7);
}

.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-btns a {
display: inline-block;
padding: 0;
letter-spacing: 0;
vertical-align: middle;
cursor: pointer;
background: transparent;
text-decoration: none;
text-transform: uppercase;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
color: #fff;
font-size: 16px;
border: 1px solid #fff;
-webkit-border-radius: 50%;
border-radius: 50%;
display: inline-block;
margin: 0 3px;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-btns a:hover {
background-color: #03833D;
border-color: #03833D;
color: #fff;
}

[etpourquelque27]

I have managed to fix it by adding padding as opposed to margin.
Here is my question:

When I use margin parameters, the page is not formatted. If I use padding, that works fine. Why is that?

Please see attached image. Thank you!

[Pavel-ww]

If I set the row to "Fluid" in backend ...

I think you should set paddings in this row's settings or via css

[Pavel-ww]

When I use margin parameters, the page is not formatted. If I use padding, that works fine. Why is that?

If simplified, margins are used to repel one element from another. If you install the same margins, then you balance the position of the element. Since your block has 100% width, nothing happens. For indentes inside the element, paddings are used, as this does not affect the external size and position of the element.

[etpourquelque27]

Thank you so much for a clear explanation. I had never thought of margin and indents within the CSS context as you have put it. Your explanation is a paradigm shift for me. I have to keep your note in my archive. Again, thank you a bunch.

[Per Yngve Berg]

https://www.w3schools.com/css/css_boxmodel.asp

[etpourquelque27]

https://www.w3schools.com/css/css_boxmodel.asp

Thank you for your input. However, I have already resolved this issue.