Not able to set 100% to width of the flex containers

Hi Experts,

     Not able to set width 100% for flex containers.  Is it right? that to set width 100% to flex containers.  I have a flex container, which is like header or nav bar.  I am pasting the code below for reference.  I am also attaching screen shots for referencescreen shot for reference

{% load static %}
{% load pipeline %}
{% load wagtailcore_tags  %}
{% load template_tags %}
{% load render_bundle from webpack_loader %}

<!doctype html>
<html>
  <head>
    <title>NTL</title>
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.png' %}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes,shrink-to-fit=no">
    {% stylesheet 'style' %}
    {% block head %}{% endblock %}
  </head>
  {% block body %}
    <body class="{% if body_class %}{{body_class|safe}}{% endif %} navigation-bar-shown">
      <input type="checkbox" class="hide" id="navbar-menu-toggle" />
      <input type="checkbox" class="hide" id="navbar-search-toggle" {% if query|length|get_digit:"0" != 0 %}checked{% endif %}/>

      <header class="navigation-bar-container">
        <label class="screen" for="navbar-menu-toggle"></label>

        <div class="navigation-bar container">
          <div style="background: #facb66; color: #333; font-size: 14px; padding: 10px; text-align: center">
            <div class="page">
              This is alpha. Help us by providing <a href="mailto:librariesnt.servicedesk@nt.gov.au?subject=NTDL+Feedback">feedback</a>.
            </div>
          </div>

          <div class="strip">
            <div id="navbar-search">
              {% get_search_path as search_path %}
              <form action="{{search_path}}" method="get" role="search" class="search-container" id="search-form">
                <div class="menu-container">
                  <label class="menu" for="navbar-search-toggle" id="navbar-clear">
                    <i class="material-icons">clear</i>
                  </label>
                </div>
                <input type="text" id="search-query" placeholder="Start typing search terms" name="query" value="{{query}}" class="query" autocomplete="off" />
                <span role="button" class="filter clickable" id="navbar-filter">
                  <i class="material-icons" style="verticalAlign: bottom">filter_list</i>
                </span>
              </form>
            </div>
            <div id="navbar-standard">
              <div class="menu-container">
                <label class="menu clickable" for="navbar-menu-toggle">
                  <i class="material-icons show-menu">menu</i>
                </label>
              </div>
              <a href="/" class="logo">
                Territory Stories
              </a>

              {% main_nav_menu %}

              <div id="autocomplete-screen">
                <ul id="autocomplete-results">
                </ul>
              </div>

              <label for="navbar-search-toggle" class="search" id="toggle-search-button">
                <i class="material-icons">search</i>
              </label>
            </div>
          </div>
        </div>
      </header>

      {% block content %}{% endblock %}

Open in new window





Please help me in resolving this issue.

With Many Thanks,

Bharath AK
issue1.PNG
LVL 1
Bharath A.KAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mohan singhWeb developerCommented:
Hi@Bharath A.K
 
can you provide me a live link of your page

Thank You
Mohan SIngh
0
Bharath A.KAuthor Commented:
Hi Mohan,

 the link is http://54.252.92.17:8000/

With Many Thanks,
Bharath AK
0
Bharath A.KAuthor Commented:
Hi Administrator,

    Its my bad I had forget to add code tag to the question.

Thanks for letting me know.

Kind Regards,
Bharath AK
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
100% width means width of parent container. Flex has no bearing on this.
If your component is not stretching full width then you need to look at the container.
Does it have a width
Does it have padding

Use the console F12 and look at the computed section to see where your elements are getting their width from
0
Bharath A.KAuthor Commented:
Hi Julian,

       I am using bootstrap.  I had changed the class of the div from container to container-fluid. The problem got resolved.  I was under assumption flex has something to do with the parent containers width.  Thanks for clarifying.  Now my problem is resolved.

With Many Thanks,
Bharath AK
0
Julian HansenCommented:
You are welcome,

I had changed the class of the div from container to container-fluid.
Bootstrap container - is a max-width container (1170 on large, 970 on medium, 750 on small, 100% on extra small)
The container-fluid is a full width container in all views.

So what you have done is the right way of solving this.

If you have any further questions - post back here - if your problem has been resolved please can you close the question.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bharath A.KAuthor Commented:
Hi All,

Now my problem is resolved.  Thank you all for your suggestions and help.

With Many Thanks,

Bharath AK
0
Julian HansenCommented:
You are welcome
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
css3

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.