Full width not consistent

Beaver Builder
1

On the page I am working on, http://preferredchoicerealtors.com

the home and agents page both have the content boxes full width and centered. But on the careers page all the content is pushed to the left. All the settings for all 3 pages are set the same. What could be the reason that this one page is reacting differently?

2

Problem is in your theme’s CSS file.

3

Maybe this article from the KB could help(?)
https://kb.wpbeaverbuilder.com/article/120-full-width-rows-on-third-party-themes

4

So i put this in the custom CSS section of the theme and I also put it in the global settings section of BB. The homepage and Agents page both went full width and centered perfectly but the careers page did not change at all. All 3 pages have the same page attributes so I’m confused to why only this one page is reacting differently.

 body.fl-builder {
      padding-left: 0;
      padding-right: 0;
}
.fl-builder > .site {
      max-width: 100%;
}
5

Can you share a link to the page so we could inspect the CSS?
Ah, it’s already shared, so, careers you say…

6

I checked this page source code: http://preferredchoicerealtors.com/careers
And see a grid.css stylesheet applied to the layout that doesn’t seem to come from BB.
If i disable some float: left;, the right gap disappears: see screenshot.

57
571825×1062 199 KB

So, assuming grid.css comes from the theme or a plugin, i’d say there’s a conflict with BB CSS.

As a workaround, you could try to add this CSS patch to the layout:

.fl-col-group {
    float: none;
}

Hmm, no, it not specific enough…
Do you use a specific element to build the grid on this page, like a plugin?

[Update] You could try this:

.col-12-12 {
    width: 100%;
    padding-right: 0;
}
.fl-row .fl-col-group {
    float: none;
}

Whatever is the element that adds grid.css it seems to conflict with BB CSS.
So if you’re able to identify it and don’t really need it, maybe you’d better remove it :wink: