Navbar container is fluid but still it does not have full width?

Question

I have made Navbar but it does not have full width. There is some space left in right corner (see screenshot)

Navbar.js:

import React, { Component } from 'react';
import './navbar.css';

class Navbar extends Component {

  render() {
    return (
      <div>
          <nav className="navbar navbar-inverse">
            <div className="container-fluid">
                <div className="navbar-header">
                  <a className="navbar-brand" href="/">Cricket App</a>
                </div>
                <ul className="nav navbar-nav">
                  <li><a href="/">Home</a></li>
                </ul>
            </div>
          </nav>
      </div>
    );
  }
}

export default Navbar;

In Navbar.css I tried following but still does not work:

.navbar {
width:100%;
}

Screenshot see upper right corner:

@Xoog In ReactJS we have to wrap all elements inside `div` if you are not familiar with reactjs you can just ignore it. — stone rock, Feb 02 '18 at 08:23
@ChrisRosenlind I have not styled `body`. What should I do in navbar.css — stone rock, Feb 02 '18 at 08:26
@stonerock, just inspect the `body` etc anyway, if you dont use any css-resets it might have gotten some styling anyway. — Christoffer Rosenlind, Feb 02 '18 at 08:27
@stonerock You don't need to wrap elements inside div. As long as you are returning one parent, it will work — DragonBorn, Feb 02 '18 at 08:27
@stonerock I'm familiar, hence asking the purpose. You don't need it. — Xoog, Feb 02 '18 at 08:28
@stonerock Try to add a `row` class to wrapping div for the `nav` as seen here: https://stackoverflow.com/questions/25427407/bootstrap-3-container-fluid-with-grid-adding-unwanted-padding — Christoffer Rosenlind, Feb 02 '18 at 08:29

score 3 · Accepted Answer · answered Feb 02 '18 at 08:32

3

You can use vw instead of %. When you're using width it will take 100% of the parents width. However when you want to use the width of the view you can just

.navbar{
   width: 100vw!important;
}

answered Feb 02 '18 at 08:32

SomeRandomGuy

72
5

`width:100%;` does not work but `width: 100vw!important;` works fine why so ? – stone rock Feb 02 '18 at 08:35
1

Vw means View Width so when you say width: 100vw it will just take 100% of the View Width instead of just 100% of the parent element. – SomeRandomGuy Feb 02 '18 at 08:38

Navbar container is fluid but still it does not have full width?

1 Answers1