Search code examples
reactjswidth

How to fill the entire width (React.js)?

i'm new to React.js and the first thing i noted is that the entire width of the page is not filled. This is my JS code:

var Navbar = React.createClass({
    render: function(){
        return(
            <div className="navbar"> </div>
        );
    }
});

ReactDOM.render( <Navbar/>,document.getElementById('test') );

And CSS:

.navbar{
    background-color: green;
    width: 100%;
    height: 3em;
}

There is a 3px top, left, right unexpected margin.

Solution

  • Your body either has a margin or padding. You could remove but then it gets messy with other areas of the page you want to have even padding. Another option is you could make the navbar position fixed. which will ignore padding/margin. 

    .navbar{
  position: fixed;
  top: 0;
  left: 0;
  background-color: green;
  width: 100%;
  height: 3em;
}

    http://codepen.io/finalfreq/pen/VKPXoN