How to Make a Wordpress Theme Full Width

How Do I Make My Wordpress Theme Full Width?

Your page content is inside

<div class="center">

and in you css

.center {
    margin: 0 auto;
    width: 85%;
}

Change or override the width: 85% to 100%

UPDATE:
The page I'm seeing right now has:

<div class="overflow-container" id="overflow-container">
    ...
    <div class="max-width" id="max-width">
        ...
        <div class="post-content">
            ...
            <div class="fl-module-content fl-node-content">

with CSS:

.overflow-container {
    height: auto;
    min-height: 100%;
    overflow: hidden;
    padding: 0 4.167%;
    position: relative;
}

.max-width {
    margin: 0 auto;
    max-width: 1400px;
}

.singular .post-content, .singular .post-meta, .error-404 .post-content, .error-404 .post-meta {
    padding: 0 18.1681%;
}

.singular .post-content, .singular .post-meta, .error-404 .post-content, .error-404 .post-meta {
    padding: 0 13.6261%;
}

.singular .post-header, .singular .post-content, .singular .post-meta, .error-404 .post-header, .error-404 .post-content, .error-404 .post-meta {
    padding: 0 9.08406%;
}

.fl-module-content {
    margin: 20px;
}

You can do most of what you want by adjusting .max-width{max-width}, .post-content{padding} and .overflow-container{padding}. Maybe change .fl-module-content{margin} to 10px (for mobile anyway)

Creating a full width template for Wordpress

You only have a litte mistake, but you were on the right track.

This CSS statement .no-body-padding body { makes the code look for a body element inside of an element with the class .no-body-padding. Well, there is no such element inside this div. So nothing happens.

You need to give this class to the body element of your page, which can be found in the header.php of your theme.

You can duplicate (copy) the header.php and name it header-fullwidth.php .

In the duplicate you add the class inside the body html tag. You need to replace this:

<body <?php body_class(); ?>>

with this to have the class added:

<body <?php body_class( 'no-body-padding' ); ?>>

In your CSS you can use the !important statement to be sure this is assigned. But if you put the stylesheet information for the body above and the class (.no-body-padding) styling below this, it should work fine. The code runs from top to bottom, that is why it is called "cascading" stylesheet. So it will be overwritten with the 0 padding.

To use this new created header template, you can just add the name inside the function call of your page template (page.php):

get_header('fullwidth');

Make sure the name of your file (header-fullwidth) and the parameters in the get_header are the same.

You will also need a page template: duplicate the page.php and call it page-fullwidth.php. In this file, you add at the top /* Template Name: Fullwidth */ and then do the changes within the get_header() (add 'fullwidth'). After that, you can go in the wp-admin backend and edit a page. On the right side under "page attributes" you will find the page templates to select. Save the page and you have your fullwidth style.

Hope this helps!

How to make content area in full width in Twenty Twenty-One theme?

In WordPress to change style you need to use inspect code and get the CSS definition and then modify it. It's not that hard.
Try following code, You can see more explanation on https://ajaytechie.com/wordpress/how-to-change-width-of-post-content-area-in-twenty-twenty-one-wordpress-theme.html on my blog you can also see it live in action.

/* Change the content width to be same as header/nav/footer's width */
@media only screen and (min-width: 822px) {
    :root {
        --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
    }
}

How do i reduce the width of a full-width Wordpress theme

Add a specific rule to your #site:

#site {
    max-width: 90%;
    margin: auto;
    position: relative;
}

This overrules the current absolute position of your site (in full screen) and applies a 90% width to it.

Make WP Edge theme full width

Some of the content on your page is also in another container called #primary that has width: 70% applied to it, you could add this to make that content 100% width:

#primary {
  width: 70%; // Remove this.
  width: 100%; // Add this.
}

Sample Image

If you remove max-width from .container, the sample page you provided defaults to 100% width.

.container {
  max-width: 1170px; // Remove this line entirely.
}

Full Width