css [HELP] Conteúdo não vai para a direita quando a barra de navegação está aberta

[ShadowDLL 2]

Olá pessoas,
Estou desenvolvendo um painel responsivo, porém, durante os testes do mesmo encontrei um erro ao abrir o 'navbar',

sendo assim, gostaria de pedir uma ajudinha de vocês se possível...

 

Bem, vamos lá!

 

 

[ Qual o Problema? ]

Ao abrir o 'navbar' na resolução para dispositivos móveis, o conteúdo presente em <div class="one-content"> deveria

ser 'jogado' para a direita sem redimensionar a largura dos itens conforme o 'navbar' é apresentado na tela, porém,

o mesmo está redimensionando a largura dos itens para ajustar-se na tela sem os 'jogar' para a direita...

 

Vale a pena ressaltar que o conteúdo só deverá ficar com uma parte "oculta" nas resoluções de dispositivos móveis.

 

 

[ Imagem do Erro ]

 

[ Imagem da Solução ]

 

[ Código com Erro ]

 

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="one-wrapper">
    <div class="one-sidebar"></div>

    <div class="one-content">
        <div class="one-navbar">
            <div class="toggle">
                <a class="toggle-btn"></a>
            </div>
        </div>

        <div class="container">
            <form class="form-inline">
                <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>

                <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect">
                    <option selected>Choose...</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>

                <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
                    <input type="checkbox" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Remember my preference</span>
                </label>

                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</div>

CSS

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css');

.one-wrapper {
	align-items: stretch;
	display: flex;
	width: 100%;
}

.one-sidebar {
	background-color: #333c4e;
	transition: all 0.2s;
	min-width: 250px;
	max-width: 250px;
	color: #ffffff;
}
.one-sidebar.active {
	margin-left: -250px;
}









.one-content {
	background-color: #f0f1f3;
	align-items: stretch;
	transition: all 0.2s;
	min-height: 100vh;
	color: #666666;
	width: 100%;
}







.one-navbar {
	border-bottom: 1px solid #cccccc;
	background-color: #ffffff;
	padding: 10px;
	width: 100%;
}
.one-navbar .toggle {
	padding: 20px;
}
.one-navbar .toggle a {
	background: #000000;
	padding: 20px;
}

JS

$(function(){
	$ ('.toggle-btn').click (function(){
		$('.one-sidebar').toggleClass('active');
	});

	if ($(window).width() < 1000) {
		$('.one-sidebar').toggleClass('active');
	}
});

 

Desde já, agradeço!