border issues

HTML

<div class="outer">
	<ul id="CPC" class="CPC hide">
		<li><a href="www.google.com">list1</a></li>
		<li><a href="www.google.com">list2</a></li>
	</ul>
	
	<div class="inner">
		<input type="checkbox" id="id_CPC" class="class_CPC" onClick="toggle_CPC('all')"> click_CPC
		
		<p class="image-holder">Image Goes Here</p>	
	</div>
</div>

CSS

.hide{
	display:none;
}	
	
.image-holder {
	float:right;
	margin:400px 0px 0px 0px;
	width:500px;
	height:400px;
	padding:3px;
	position:relative;
	z-index:1;
	display:inline;
}	
	
.inner {
	width:800px;
	height:800px;
	margin-left:auto;
	border:1px solid #000;
	position:relative;
}		
	
.outer{
	width:1000px;
	height:800px;
	border:1px solid #000000;
	position:relative;
}

JavaScript

function toggle_CPC(type){
	const menu = document.getElementById("CPC");
	if (document.getElementById("id_CPC").checked){
		menu.classList.remove('hide');
	}
	else{
		menu.classList.add('hide');
	}

}