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

**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 ]**

	/applications/core/interface/imageproxy/imageproxy.php?img=https://i.stack.imgur.com/dFLSC.png&key=16cb8a7cedcc8a3b05fe559b5299f975e2a78e21772504f4b915d26af122e0ae" style="width:600px;height:499px;" data-imageproxy-source="https://i.stack.imgur.com/dFLSC.png" />

	 

	**[ Imagem da Solução ]**

	/applications/core/interface/imageproxy/imageproxy.php?img=https://i.stack.imgur.com/Qfcmp.png&key=268e6d14c2b3211d8ead3661d1da1f929a77e8c65e9318b614d866cc8b823bd9" style="width:600px;height:499px;" data-imageproxy-source="https://i.stack.imgur.com/Qfcmp.png" />

	 

	**[ 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!**