How can I make the footer theme full width? [closed]

Question

I have some blank space in footer in the page containing Bundle Product in case of 0 or 1 bundle Items; In case of 2 or more it is Ok

The structure of footer-container

<div class="footer-container">
    <div class="footer">
        <div class="row">
            <div class="col-xs-12">
                <div class="col-sm-3">
                    <p class="title">xxxxxxxxxxxxxxxxxxxx</p>
                    <div class="block">
                        <p class="text-uppercase"><b>xxxxx</b> xxxxxxx</p>
                        <p>xxxxxxxxxxxxxxxxxxxxx</sup></p>
                        <a href="xxxxxxxx" id="xxxxx">xxxxxxxx</a>
                    </div>
                    <div class="block">
                        <p class="text-uppercase"><b>xxxxxx</b>xxxx</p>
                        <p>xxxxxxxxxxxxxxxxxx</p>
                        <a href="xxxxxxxxx" id="xxxxxxxxxxx">xxxxxxxxxxx</a>
                    </div>
                    <div class="block">
                        <p class="text-uppercase">xxxxxxxxxxxxxxx
                        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                        <a href="xxxxxxxxxxxxxxxx" id="xxxxxxxxxx">xxxxxxxxxx</a>
                    </div>
                    <div class="block">
                        <p class="text-uppercase">xxxxxxxxxx</p>
                        <p>xxxxxxxxxxxxxxxxxxxxx</p>
                        <a href="xxxxxxxxxxxxxxxx" id="xxxxxxxxx">xxxxxxx</a>
                    </div>
                    <div class="block">
                        <p class="text-uppercase"><b>xxxxxxxxx</b> xxxxxxxxx</p>
                        <p>xxxxxxxxxxxxxxxxxxx</p>
                        <a href="xxxxxxxxxxxxxxxxx" id="xxxxxxxxr">xxxxxxxxx</a>
                    </div>
                </div>
                <div class="col-sm-3">
                    <p class="title">xxxxxxxxxxxxxxxxxxx</p>
                    <div class="block">
                        <p class="text-uppercase" style="margin-bottom: 5px;"><b>xxxxxxxxxx</b></p>
                        <div class="xxxxxxxxxxx">
                        </div>

                    </div>
                </div>
                <div class="col-sm-3">
                    <p class="title">xxxxxxxxxxxxx</p>
                    <div class="block" id="xxxxxxxxxx">

                    </div>
                </div>
                <div class="col-sm-3">

                </div>
                <div class="clearfix"></div>
                <div class="col-sm-3"><p class="title">xxxxxxx</p></div>
                <div class="col-sm-3 text-uppercase">
                    <h4><a href="xxxxxxxxxxx" id="xxxxxx">xxxx <span class="blue">xxx</span></a></h4>
                    <h6>xxxxxxxxxxxx</h6>
                </div>
                <div class="col-sm-3 text-uppercase">
                    <h4><a href="xxxxxxxxxxxxxxxxxx" rel="follow" id="xxxx">xxxxxx <span class="gray">Info</span></a>
                    </h4>
                    <h6>xxxxxxxxxxxxxxxxxxxxx</h6>
                </div>
                <!--<div class="col-sm-3 text-uppercase">-->
                <!--<h4><a href="xxxxxxx" rel="follow">xxxxxx <span class="green">xxxxx</span></a></h4>-->
                <!--<h6>xxxxxxxxxxxxxxxxxxx</h6>-->
                <!--</div>-->            </div>
        </div>
        <div class="row">
            <div class="footer-bottom clearfix">
                <div class="col-xs-12">
                    <address>wwwwwwwwwwwwwwww</address>
                </div>
            </div>
        </div>
    </div>
</div>

Thanks in advance

Answer 1

you have to change in styles.css

for header

.page-header {
    margin: 0 auto;
    max-width: 1260px;
    padding: 0 30px;
}

replace with

.page-header {
    margin: 0 auto;
   width:100%;
    padding: 0 30px;
}

for content

.main-container, .footer-container {
    margin: 0 auto;
    max-width: 1260px;
    padding: 15px;
    position: relative;
}

replace with

.main-container, .footer-container {
    margin: 0 auto;
    width:100%;
    padding: 15px;
    position: relative;
}

for footer

.main-container, .footer-container {
    margin: 0 auto;
    max-width: 1260px;
    padding: 15px;
    position: relative;
}

replace width

.main-container, .footer-container {
    margin: 0 auto;
    width:100%;
    padding: 15px;
    position: relative;
}

Note: after edit css file remove cache is required.

I hope this will help you.