CODEWITHSUNDEEP
csstwitter-bootstrap
stone rock
stone rock

Reputation: 1953

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

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:

enter image description here

Upvotes: 0

Views: 2358

Answers (1)

SomeRandomGuy
SomeRandomGuy

Reputation: 72

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;
}

Upvotes: 3

Related Questions