Ubuntu Server 18.04 LVM shrinks on reboot

I have installed Ubuntu 18.04 server on a thin provisioned VMWare virtual machine and after running the updates and rebooting the 50G disk now shows as being 3.9G and is 78% used. I can resize the LVM but I would like to know what is going on! Any ideas? Am I doing something wrong or is there a bug in Ubuntu / VMWare causing the thin provisioned disk to shrink the LVM to the used size?

Thanks in advance

how can I make the parent container proportionate to the text inside it, especially as the content and screen shrinks

So I have this black transparent box in my header. It’s got some text inside. When the text shrinks I want the the box to shrink as well, but I want it to shrink proportionately. The problem I’m running into is that when I shrink the text in my media queries, the width of the p tags doesn’t shrink with it. so This pushes the right side of its parent farther out making it disproportional. I’ve tried setting the p tags to inline but then the parent won’t shrink to fit the tags unless I set the parent to inline. And If I do that I need to use flexbox to stack the p tags on top of each other again, and I can’t use display: flex cause its already display: inline. Any Ideas?

const navLinks = document.querySelectorAll('.nav-links .link'); const linksArray = Array.from(document.querySelectorAll('.links div')); const header = document.querySelector('header'); const form = document.querySelector('form');   for (var i = 0; i < navLinks.length; i++) { 	navLinks[i].addEventListener('click', changeColor); }  for (var i = 0; i < linksArray.length; i++) { 	linksArray[i].addEventListener('click', shuffle); }  function changeColor() { 	let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F']; 	let hexColor = '#';  	for(let i = 0; i < 6; i++) { 		let random = Math.floor(Math.random()*hexArray.length); 		hexColor += hexArray[random]; 	}  	header.style.backgroundImage = 'none'; 	header.style.backgroundColor = hexColor;  	setTimeout(function() { 		header.style.backgroundImage = 'url(img/canada.jpeg)'; 	}, 2000); }  function shuffle() { //  Fisher-Yates shuffle algorithm   for (let i = linksArray.length - 1; i > 0; i--) {     let j = Math.floor(Math.random() * (i + 1));      [linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML];    } }  form.addEventListener('submit', (e) => { 	e.preventDefault(); 	const name = document.querySelector('.name').value; 	const address = document.querySelector('.address').value; 	const city = document.querySelector('.city').value; 	const dialog = document.querySelector('.dialog-wrap'); 	const close = document.querySelector('.close');  	dialog.style.display = 'block'; 	document.querySelector('.dialog-name').innerHTML = name; 	document.querySelector('.dialog-address').innerHTML = address; 	document.querySelector('.dialog-city').innerHTML = city; 	close.onclick = () => { 		dialog.style.display = 'none'; 		document.querySelector("form").reset(); 	} 	 })
html, body { 	margin: 0; 	padding: 0; }  body { 	font-family: 'Verdana'; 	box-sizing: border-box; 	color: #63889b; }  * { 	outline: 1px solid red; }  /*------NAV-----*/  nav { 	display: flex; 	justify-content: space-between; 	font-size: 1.8rem; 	padding: 25px 0; 	position: fixed; 	background-color: #fff; 	width: 100%; 	top: 0; 	left: 0; 	right: 0; 	z-index: 10; 	box-shadow: 0px 0px 70px rgb(99, 99, 99, 0.5); }  .brand, .nav-links { 	display: flex; 	align-items: center; }  .brand { 	margin-left: 6%; }  .logo { 	max-width: 70px; 	max-height: 45px; 	margin-right: 25px; }  .nav-links { 	position: relative; 	margin-right: 6%; }  .nav-links .link { 	text-transform: uppercase; 	margin-right: 20px; 	cursor: pointer; 	transition: all .2s ease; }  .nav-links .link:hover { 	color: #014263; }  /*-----HEADER-----*/  header { 	margin-top: 92px; 	background-image: url(img/canada.jpeg); 	background-position: center; 	background-size: cover; 	padding-top: 7%; 	padding-bottom: 25%; }  .header-info { 	display: inline-block; 	color: #fff; 	font-size: 1.5rem; 	background-color: rgba(0,0,0,0.6); 	padding: 35px; 	margin-left: 10%; }  header p { 	margin: 0; 	padding: 0; }  header p:first-child { 	margin-bottom: 25px; }   /*-----MAIN-----*/  main { 	display: flex; 	background-color: #fff; }  .col { 	flex-basis: 33.33%; 	padding: 50px 0 40px 0; }  .col p { 	width: 65%; 	font-size: 1.25rem; 	text-align: center; 	margin-left: auto; 	margin-right: auto; }  .col img { 	display: block; 	margin: 0 auto; }  .col-3 img { 	width: 280px; 	height: 155px; }  .col-3 img, .col-3 h3, .col-3 p { 	position: relative; 	top: -8px; }  .col-2 img, .col-2 h3, .col-2 p { 	position: relative; 	top: 30px; }  .col-1 { 	margin-left: 7%; }  .col-3 { 	margin-right: 7%; }  h3 { 	text-align: center; }  /*------FOOTER-----*/  footer { 	font-family: 'Helvetica'; 	background-color: #63889b; 	display: flex; 	justify-content: space-between; 	color: #fff; 	padding-bottom: 30px; }  .internal-links { 	padding-left: 15%; 	font-size: 1.5rem; }  .links div { 	margin:2px 0; 	cursor: pointer; }  .internal-links h4 { 	text-decoration: underline; 	text-align: center; 	margin-bottom: 8px; 	margin-top: 30PX; 	color: #fff; }  .links { 	font-size: 1.2rem;  	display: flex; 	flex-direction: column; }  .form-wrap { 	padding-top: 30px; 	display: flex; 	align-items: flex-end; 	flex-basis: 50%; }  form { 	margin: 0 100px 0 0; 	display: flex; 	flex-direction: column; 	width: 100%; }  input { 	border: none; 	outline: none; 	font-size: 1.6rem; }  label { 	font-size: 1.3rem; 	padding: 3px 0; }  button { 	margin-top: 20px; 	border: 1px solid #fff; 	width: 50%; 	font-size: 1.3rem; 	background-color: #1090d1; 	align-self: flex-end; 	color: #fff; 	padding: 4px 30px; }  .dialog-wrap { 	background-color: rgba(0,0,0,0.7); 	position: fixed;     width: 100%;     height: 100%;     top: 0px;     left: 0px;     z-index: 1000;     display: none; }  dialog { 	position: fixed; 	top: 0; 	left: 0; 	right: 0; 	bottom: 0; 	width: 500px; 	height: 220px; 	border: none; 	display: flex; 	flex-direction: column; 	justify-content: flex-start; }  dialog div { 	font-size: 1.4rem; 	color: #fff; 	margin: 10px 0; 	outline: 1px solid #63889b; }  dialog div:first-child { 	margin-top: 0px; }  dialog .label { 	background-color: #63889b; 	padding: 7px; 	display: inline-block; 	width: 30%; 	margin: 0; 	text-align: center; }  dialog .info { 	display: inline-block; 	padding-left: 5px; 	color: #000; }  dialog button { 	border: none; 	width: 100%; 	margin: auto; 	padding: 7px; }  dialog button:hover { 	cursor: pointer; 	transition: all .3s ease; 	background-color: #0675ad; }  dialog div:last-child { 	outline: none; }  @media screen and (max-width: 1600px) { 	.header-info { 	font-size: 1.4rem; 	width: 392px; 	margin-left: 7%; 	} }  @media screen and (max-width: 1400px) { 	.col p, .links { 		font-size: 1.1rem; 	} }  @media screen and (max-width: 1200px) { 	nav { 		font-size: 1.5rem; 	}  	.header-info { 		font-size: 1.3rem; 	}  	.col-1 img { 		width: 270px; 		height: 132px; 	}  	.col-2 img { 		width: 280px; 		height: 107px; 	}  	.col-3 img { 		width: 250px; 		height: 140px; 	}  	.col p, .links, label { 		font-size: 1rem; 	} }  @media screen and (max-width: 1000px) { 	.col p { 		width: 85%; 	}  	.col-1 img { 		width: 230px;     	height: 112px;  	}  	.col-2 img { 		width: 220px;    		height: 82px; 	}  	.col-3 img { 		width: 210px;     	height: 120px; 	}  	button { 		font-size: 1.1rem; 	}  	dialog div {     	font-size: 1.2rem; 	} }  @media screen and (max-width: 925px) {  }  @media screen and (max-width: 900px) { 	.header-info { 		font-size: 1.1rem; 	} }
<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 	<title>Chapman Automotive Skills Assessment</title> 	<link rel="stylesheet" href="style.css"> </head> <body> 	<nav> 		<div class="brand"> 		<img src="img/Logo.png" alt="logo" class="logo"> 		<div class="comp-name">CHAPMAN</div> 		</div>  		<div class="nav-links"> 			<div class="link">Home</div> 			<div class="link">Sales</div> 			<div class="link">Blog</div> 			<div class="link">Login</div> 		</div> 	</nav> 	<header> 		<div class="header-info"> 			<p>We are a company that does stuff.</p> 			<p>Car and web stuff.</p> 		</div> 	</header> 	<main> 		<div class="col col-1"> 			<img src="img/car1.jpg" alt="car1">  			<h3>Some Header</h3>  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 		</div>  		<div class="col col-2"> 			<img src="img/car2.jpg" alt="car2">  			<h3>More Stuff</h3>  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 		</div>  		<div class="col col-3"> 			<img src="img/car3.jpg" alt="car3">  			<h3>Last Column</h3>  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 		</div> 	</main> 	<footer id="footer"> 		<div class="internal-links"> 			<h4>Internal Links</h4>  			<div class="links"> 				<div>Page One</div> 				<div>Another Page</div> 				<div>Sales Page</div> 				<div>Page Three</div> 				<div>Keep Going</div> 				<div>Last One</div> 				<div>Just Kidding</div> 			</div> 		</div>  		<div class="form-wrap"> 			<form> 				<label for="Name">Name</label> 				<input type="text" class="name" required> 				<label for="Name">Address</label> 				<input type="text" class="address" required> 				<label for="Name">City</label> 				<input type="text" class="city" required>  				<button type="submit" id="submit">Submit Form</button> 			</form>  			<div class="dialog-wrap"> 				<dialog> 					<div><span class="label">Name:</span><span class="dialog-name info"></span></div> 					<div><span class="label">Address:</span><span class="dialog-address info"></span></div> 					<div><span class="label">City:</span><span class="dialog-city info"></span></div> 					<div><button class="close">Close</button></div> 				</dialog> 			</div> 	</footer> 	<script src="script.js"></script> </body> </html>

I can’t use magic numbers.