I have an issue with a specific layout with bulma container. I want to show a layout with two columns inside a container, left background part must be gray and right white. I need to wrap columns inside container for size and breakpoints.
.container{
min-height: 100vh
}
.left{
background-color: lightgray;
min-height: 100vh
}
.right{
background-color: white;
min-height: 100vh
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<nav class="navbar has-background-grey-dark">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo-white.png" width="112" height="28">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="columns">
<div class="column is-9 left">
Left
</div>
<div class="column">
Right
</div>
</div>
</div>
You can see I work here: https://codepen.io/hans-felix/pen/GRqKeYe
Current result:
Expected result:
I use containers to align items as you can see.
How Can I hanlde this design?