why my container isn't fit to 100%?

Question

here's my codes.

<header class="top-nav">
   <div class="container">
      ....
   </div>
</header>

that container has 'width : 720px' , 'padding : 0 15px' and 'margin: 0 9px'. I think It has right width (768px) on iPad(768px x 1024px), but that isn't to fit my page. How can I solve this?

++ I work on Chrome develope tool.

container => container-fluid isn't work for me :(

after using container-fluid, width=738, padding=0 15px, I think It is right too, but It has same problem

it has the width you have defined - 720 + 15 + 15 = 750 (padding) - margin does not alter the container size. — Adam K., Mar 28 '17 at 05:49
@AdamK. right, 750px ,and 16px margin. Is it right on (768px x 1024px)? — J. Kim, Mar 28 '17 at 05:53

G.Ashok Kumar · Accepted Answer · 2017-03-28T06:20:34.070

1

container-fluid will be used for 100 % screen.

<header class="top-nav">
   <div class="container-fluid">
      ....
   </div>
</header>

if its not work, then try like this, and add styles like below

.newclassname { 
  padding: 0px;
}

Lets try this,

<nav class="navbar navbar-default">
  <div class="container-fluid">
...
</div>
</nav>

edited Mar 28 '17 at 06:20

answered Mar 28 '17 at 05:51

G.Ashok Kumar

1,649
2
13
25

It is same :( . It dosen't work for me – J. Kim Mar 28 '17 at 05:56
Try to add this line
– G.Ashok Kumar Mar 28 '17 at 06:01
same. can't see right side too. – J. Kim Mar 28 '17 at 06:05
I think you need to have padding:0px; try this and check if its okay for you – G.Ashok Kumar Mar 28 '17 at 06:10
same, after changing top-nav to navbar same too. – J. Kim Mar 28 '17 at 06:17
solved :) Thank you , have a nice day. – J. Kim Mar 28 '17 at 06:27

Vaishal Patel · Answer 2 · 2017-03-28T06:31:25.753

0

Use the class container-fluid instead. Example code:

 <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootflat</a>
    </div>
  </div>
 </nav>

edited Mar 28 '17 at 06:31

answered Mar 28 '17 at 05:51

Vaishal Patel

399
4
24

please check edited things – J. Kim Mar 28 '17 at 06:00
Okay. Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable. Use .container for a responsive fixed width container. Could you place the container-fluid div on the outside instead – Vaishal Patel Mar 28 '17 at 06:20

score 0 · Answer 3 · answered Mar 28 '17 at 05:54

0

Please try class="container-fluid".

answered Mar 28 '17 at 05:54

Rohan

467
2
11

please check edited – J. Kim Mar 28 '17 at 06:00
okay then i think try .top-nav {width:100%} and use class="container-fluid" – Rohan Mar 28 '17 at 06:09

VISHAL SINGH · Answer 4 · 2017-07-29T10:07:55.567

0

Manually you can set container width in style.css page like .container{width:1180px;}

edited Jul 29 '17 at 10:07

answered Mar 28 '17 at 06:38

VISHAL SINGH

651
1
8
20

why my container isn't fit to 100%?

4 Answers4