# Container

A Container or multiple container blocks can be added inside a section.

Some content such as backgrounds and images can break out of the container width but most content will be inside.

The inner container defines the website content width and is centered on the page.

A .cc-cntr class is added by default and applies a maximum width of 1366px.

{% hint style="info" %}
By default, when adding a Cwicly Section a container block is automatically inserted inside.&#x20;

Additional Container blocks can be added inside the Section and the original container can be removed if required.
{% endhint %}

## Add

A container can be added to a container by using the Quick Inserter or the Block Inserter.

* Click  the Container icon in the Quick Inserter to add a Container block to your page.

<figure><img src="/files/tUAc3m5MXEwFDtFZAn99" alt=""><figcaption></figcaption></figure>

* Alternately, search for the Container block in the Block Inserter and click to add inside your section.

![](/files/UYFzV7dIIqSozurw6DNq)

## Global Settings

* In the Block tab, open the Container tab.
* Click the "+" icon to add Container settings.

### ![](/files/Z5As4cS76pmtxWerBK2D)

* Click the Container field to open the Container settings.

### ![](/files/c30s5HhOABBpcEDc9d4Y)

* Customise the Global container settings as required.
* For instance, you can modify the Max Width as required.

<figure><img src="/files/aojO5SxaHqrfMcFSFOZJ" alt=""><figcaption></figcaption></figure>

## Add CSS class to container

From Global Styles, you can add a CSS class to add specific styles to a container.

In the Block tab of the Elements tab of the Global Styles tab, open the Container tab.

* Click the "+" sign to add a new class.&#x20;

![](/files/BSmDh8TYc9GsbI1LOWBT)

* Input a meaningful container name and class name.
* Style as required, in this case we have given it a black background.

<figure><img src="/files/d5NYmPUWw6DNMDRNLseU" alt=""><figcaption></figcaption></figure>

* Select the Container to which you wish to apply the class and styles you have created.
* Click the "+" sign to add a class.

<figure><img src="/files/XVQBXod6ZS5ptONvTsoh" alt=""><figcaption></figcaption></figure>

* Find the class you created in the Classes modal and click "Enter" to apply.

![](/files/E9km7jtsO5b5tmJknDwC)

<figure><img src="/files/Q7Itw0v5Zq4OvHZdg5gx" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/blocks/container.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
