Text reaching over the specified width of its DIV <p>EDIT: Another image to further showcase my issue:</p> <p><a href="http://imageshack.us/photo/my-images/405/cvtc.png/" rel="nofollow noreferrer">http://imageshack.us/photo/my-images/405/cvtc.png/</a></p> <p>I know this question has been asked but every solution I have tried has not worked, i.e.: word-wrap, text-wrap, overflow-wrap.</p> <p>I have text that I have measure to be 344px in width, and would like the rest of my texts to meet that boundary and/or not flow over it. I keep setting this specified width of 344 or even less and this last set of text especially is just causing issues. Here is a screen shot of the issue as well as my HTML and CSS. Any help is appreciated!</p> <p><img src="https://i.stack.imgur.com/amMc0.jpg" alt="http://imageshack.us/photo/my-images/706/1fj8.png/"></p> <p>HTML</p> <pre><code> &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Jessica ___: PORTFOLIO&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="style1.css"&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.lettering.js"&gt;&lt;/script&gt; &lt;link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'&gt; &lt;link href='http://fonts.googleapis.com/css?family=Playfair+Display:700italic' rel='stylesheet' type='text/css'&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="letter-container" class="letter-container"&gt; &lt;div id="heading"&gt;HELLO&lt;/div&gt; &lt;div id="aboutintro"&gt;My name is&lt;/div&gt; &lt;div id="name"&gt;jessica ___&lt;/div&gt; &lt;div id="aboutbody"&gt;and I'm a student at the College of Design, Architecture, Art, and Planning of the University of Cincinnati and I like to design websites and take pictures.&lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.lettering.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { $("#heading").lettering(); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ $("#aboutintro").delay(4000).fadeIn(500); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { $("#name").lettering(); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ $("#aboutbody").delay(6000).fadeIn(500); }); &lt;/script&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS</p> <pre><code> @charset "UTF-8"; /* CSS Document */ html { background: url(grungebg.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin:0; padding:0; } @font-face { font-family: 'league_gothicregular'; src: url('leaguegothic-regular-webfont.eot'); src: url('leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'), url('leaguegothic-regular-webfont.woff') format('woff'), url('leaguegothic-regular-webfont.ttf') format('truetype'), url('leaguegothic-regular-webfont.svg#league_gothicregular') format('svg'); font-weight: normal; font-style: normal; } .letter-container { margin-left:auto; margin-right:auto; width:344px; text-align:center; } #heading { font-family: league_gothicregular, sans-serif; } #heading span { font-size: 200px; background-image: url(mask.png); -webkit-background-clip: text; background-clip: text; color: rgba(0,0,0,0); -webkit-text-fill-color: transparent; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-animation: sharpen 0.6s linear backwards; -moz-animation: sharpen 0.6s linear backwards; -ms-animation: sharpen 0.6s linear backwards; animation: sharpen 0.6s linear backwards; } #heading span:nth-child(1) { -webkit-animation-delay: 2.2s; -moz-animation-delay: 2.2s; -ms-animation-delay: 2.2s; animation-delay: 2.2s; } #heading span:nth-child(2) { -webkit-animation-delay: 2.6s; -moz-animation-delay: 2.6s; -ms-animation-delay: 2.6s; animation-delay: 2.6s; } #heading span:nth-child(3) { -webkit-animation-delay: 2.9s; -moz-animation-delay: 2.9s; -ms-animation-delay: 2.9s; animation-delay: 2.9s; } #heading span:nth-child(4) { -webkit-animation-delay: 2.4s; -moz-animation-delay: 2.4s; -ms-animation-delay: 2.4s; animation-delay: 2.4s; } #heading span:nth-child(5) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } #heading span:nth-child(6) { -webkit-animation-delay: 2.7s; -moz-animation-delay: 2.7s; -ms-animation-delay: 2.7s; animation-delay: 2.7s; } } @keyframes sharpen { 0% { opacity: 0; text-shadow: 0px 0px 100px #fff; color: transparent; } 90% { opacity: 0.9; text-shadow: 0px 0px 10px #fff; color: transparent; } 100% { color: #fff; opacity: 1; text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7); } } @-moz-keyframes sharpen { 0% { opacity: 0; text-shadow: 0px 0px 100px #fff; color: transparent; } 90% { opacity: 0.9; text-shadow: 0px 0px 10px #fff; color: transparent; } 100% { color: #fff; opacity: 1; text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7); } } @-webkit-keyframes sharpen { 0% { opacity: 0; text-shadow: 0px 0px 100px #fff; color: transparent; } 90% { opacity: 0.9; text-shadow: 0px 0px 10px #fff; color: transparent; } 100% { color: #fff; opacity: 1; text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7); } } @-ms-keyframes sharpen { 0% { opacity: 0; text-shadow: 0px 0px 100px #fff; color: transparent; } 90% { opacity: 0.9; text-shadow: 0px 0px 10px #fff; color: transparent; } 100% { color: #fff; opacity: 1; text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7); } } #aboutintro { font-family: 'Quicksand', sans-serif; font-size:65px; font-weight:300; color:white; display:none; } #name{ font-family: 'Playfair Display', serif; font-size:65px; font-weight:700; font-style:italic; background-image: url(mask.png); -webkit-background-clip: text; background-clip: text; color: rgba(0,0,0,0); -webkit-text-fill-color: transparent; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-animation: sharpen 0.6s linear backwards; -moz-animation: sharpen 0.6s linear backwards; -ms-animation: sharpen 0.6s linear backwards; animation: sharpen 0.6s linear backwards; -webkit-animation-delay: 5s; -moz-animation-delay: 5s; -ms-animation-delay: 5s; animation-delay: 5s; text-align:center; } } @keyframes sharpen { 0% { opacity: 0; text-shadow: 0px 0px 100px #fff; color: transparent; } 90% { opacity: 0.9; text-shadow: 0px 0px 10px #fff; color: transparent; } 100% { color: #fff; opacity: 1; text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7); } } @-moz-keyframes sharpen { 0% { opacity: 0; text-shadow: 0px 0px 100px #fff; color: transparent; } 90% { opacity: 0.9; text-shadow: 0px 0px 10px #fff; color: transparent; } 100% { color: #fff; opacity: 1; text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7); } } @-webkit-keyframes sharpen { 0% { opacity: 0; text-shadow: 0px 0px 100px #fff; color: transparent; } 90% { opacity: 0.9; text-shadow: 0px 0px 10px #fff; color: transparent; } 100% { color: #fff; opacity: 1; text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7); } } @-ms-keyframes sharpen { 0% { opacity: 0; text-shadow: 0px 0px 100px #fff; color: transparent; } 90% { opacity: 0.9; text-shadow: 0px 0px 10px #fff; color: transparent; } 100% { color: #fff; opacity: 1; text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7); } } #aboutbody { font-family: 'Quicksand', sans-serif; font-size:12px; font-weight:400px; color:#e5e5e5; display:none; margin-left:auto; margin-right:auto; padding:0; margin:0; } </code></pre>