Clippath i ustawienie elementu

pytanie zadane 7 stycznia 2017 w HTML i CSS przez Weenter Użytkownik (830 p.)

Witam, robię pewną strone i mam problem z tym, co widać na screenie.

Jak widzicie, tekst jest ucinany, a jak zrobić, aby on był responsywny i nie wyjeżdżał poza diva, w którym jest?

Tutaj kod HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>MyNewTemplate</title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
	<link rel="stylesheet" href="style.css"/>
	<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Open+Sans" rel="stylesheet">
</head>

<body>
	<header>
		<h1>Your title</h1>
		<div>CLICK TO START</div>
	</header>
	<section class="about_us">
		<div class="one_div"><img src="img/profile_photo.png" alt="Profile photo"/></div>
		<div class="two_div">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum enim libero, eget pulvinar diam pharetra sodales. In aliquam, tortor ac scelerisque imperdiet, massa justo dignissim justo, eget consequat urna orci in metus. Integer porttitor lectus nulla, eget lobortis magna pellentesque quis. Proin at accumsan diam. Mauris lacinia leo id lacus lacinia bibendum eget sit amet nulla. Donec non pharetra </p></div>
	</section>
</body>
</html>

A tutaj kod CSS:

body, html
{
	height: 100%;
	margin: 0;
	padding: 0;
	background-image: url(img/banner.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	font-family: 'Open Sans', sans-serif;
}
header
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}
header h1
{
	color: white;
	font-size: 60px;
	text-transform: uppercase;
}
header div
{
	color: white;
	background-color: #c0392b;
	font-size: 15px;
	padding: 20px;
	cursor: pointer;
	transition: 0.3s;
}
header div:hover
{
	background: none;
	border: 1px solid #c0392b;
}
.about_us
{
	width: 100%;
	height: 100vh;
	background-color: #1c1b19;
	color: white;
	position: relative;
}
.two_div
{
	height: 100%;
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
	clip-path: polygon(0 0, 0% 100%, 100% 100%);
	position: absolute;
	top: 0;
	left: 0;
	font-size: 13px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.two_div p
{
	width: 30%;
	margin-left: 20px;
}
.one_div
{
	background-color: #c0392b;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.about_us img
{
	width: 30%;
	position: absolute;
	right: 20px;
	top: 40px;
}