React,css : nav bar

JavaScript
1

I used flex box to center my calculator but now when I insert nav bar I’m having problem

2

You put display flex on the body.

Here is what you should do:

  • Create a separate div for the calculator and put that as display flex.
  • Then you can work on your navbar. But remove display flex from the body
1 Like
3

I agree with the solution posted already, I just want to give a (less good) alternative.

Because of the simple layout, one option might be to remove the header from document flow by using position absolute and position it at the top of the viewport.

But it feels like a bit of a hacky solution to a problem that can be solved by having layout styles applied more “correctly”.

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: cadetblue;
}
1 Like