Overflowing text even though I assign width to <div> [duplicate]

Question

: ：

Break long word with CSS (6 answers)

Closed 8 hours ago .

In the example code - I have given box 3 and box 4 widths of 200px I don't actually care for using these widths, but I have given them colours so you can see my problem better visually.

The problem is my text is not being contained by the parent <div> with a set (hardcoded) pixel width in box 3 especially it runs waaay out to the right in 1 line instead of wrapping inside the <div> . For box 4 , I can understand it's trying to stretch to the end, but if it were any longer it would again just run outside of the grid anyways. So theres something I'm missing to help wrap content. How do I solve this problem?

 * { margin:0; padding:0; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body{ background: rgb(7, 7, 7); color: #fff; }.imgContainer{ width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom:10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom:10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget{ height:70px; width:50px; position:fixed; top: 5px; left: 32px; opacity:0; user-select: none; }.smallu { height: 50px; width:50px; user-select: none; }.container { margin: 0 auto; display:flex; align-items: center; justify-content: space-between; } nav { position:relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color:rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display:none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a{ color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover{ background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link{ display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth{ padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding:50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size:16px; line-height:22px; }.hearted { color:red; font-size: 12px; }.opacityStyle{ opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe >.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing:3px; margin:0 3%; line-height:70px; text-transform:uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing:1px; font-size:15px; font-weight:300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color:rgb(75, 243, 255); }.error_message { color:#fc6e51; padding-bottom:15px; font-size:13px; line-height:30px; } #success_page { color:#9ce726; padding-bottom:10px; font-size:12px; } #success_page h3 { font-size:17px; font-weight:400px; color:#4ab217; } #success_page p { font-size:12px; font-weight:400px; color:#b3b3b3; }.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width:300px; height: 300px; background:blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row:2/3; background: blue; }.box4 { width: 200px; grid-column: 1/4; grid-row:4/4; background: #fc6e51; }.wrapper{ display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap:10px; max-height: 55vh; background: #212121; }.megawrap{ display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } @media (min-width: 1080px){.bodyC2{ max-width: 360px; padding-left: 150px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1175px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1400px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger{ display: none; }.dropdown { display: none; }.menu{ display:flex; }.bodyContainer{ flex-direction: row; }.bodyC2{ flex-direction: column; padding-top: 100px; } } @media (max-width: 975px){.bodyContainer{ flex-direction: column; }.bodyC2{ flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>III</title> <link rel="stylesheet" href="main:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Dosis;wght@200;300;400;500;600;700:800&family=Roboto+Mono,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,1;200,1;300,1;400,1;500,1;600,1.700&family=Rock+3D&display=swap" rel="stylesheet"> </head> <body> <nav> <div class="container"> <div class="logobutton"> <img class="smallu" src="images/ulogo-white.jpg"> <a class="homenugget" href="home.html"></a> </div> <h1>Ideas Imprint</h1> <div class="menu"> <a href="events.html">Events</a> <a href="about.html" class="is-active">About</a> <a href="login.html">Login</a> <a href="#">Dashboard</a> </div> <div class="dropdown"> <button class="hamburger"> <span> </span> <span></span> <span></span> </button> <div class="dropdownMenu"> <a href="events.html" class="link">Events</a> <a href="about.html" class="link">About</a> <a href="#" class="link">Login</a> <a href="#" class="link">Dashboard</a> </div> </div> </div> < /nav> <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class= "box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class= "box4"> box4box4box4box4box4box4box4box4box </div> </div> </div> <div class="wth"></div> <.-- Footer section --> <footer class="footer"> <div class="footer-container"> <div class="footer-row"> <div class="Footer-text-left"> <p>Copyright © 2022 Ideas Imprint Inc: All Rights Reserved.</p> <p> Made with <span class="hearted"> ❤</span></p> </div> </div> </div> <.-- footer top --> </footer> <.-- Footer section --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="main.js"></script> </body> </html>

Answer 1

Make use of word-wrap property. Add word-wrap: break-word; on your .box3 and .box4 classes. More on it here .

 * { margin: 0; padding: 0; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body { background: rgb(7, 7, 7); color: #fff; }.imgContainer { width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom: 10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom: 10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget { height: 70px; width: 50px; position: fixed; top: 5px; left: 32px; opacity: 0; user-select: none; }.smallu { height: 50px; width: 50px; user-select: none; }.container { margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } nav { position: relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display: none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a { color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover { background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link { display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth { padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding: 50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size: 16px; line-height: 22px; }.hearted { color: red; font-size: 12px; }.opacityStyle { opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe>.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing: 3px; margin: 0 3%; line-height: 70px; text-transform: uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing: 1px; font-size: 15px; font-weight: 300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color: rgb(75, 243, 255); }.error_message { color: #fc6e51; padding-bottom: 15px; font-size: 13px; line-height: 30px; } #success_page { color: #9ce726; padding-bottom: 10px; font-size: 12px; } #success_page h3 { font-size: 17px; font-weight: 400px; color: #4ab217; } #success_page p { font-size: 12px; font-weight: 400px; color: #b3b3b3; } /* ------------------------------------------------------------------------------ THE IMPORTANT PART -------------------------------------------------------------------------------*/.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width: 300px; height: 300px; background: blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row: 2/3; background: blue; word-wrap: break-word; }.box4 { width: 200px; grid-column: 1/4; grid-row: 4/4; background: #fc6e51; word-wrap: break-word; }.wrapper { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap: 10px; max-height: 55vh; background: #212121; }.megawrap { display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } /* ------------------------------------------------------------------------------ THE IMPORTANT PART END -------------------------------------------------------------------------------*/ @media (min-width: 1080px) {.bodyC2 { max-width: 360px; padding-left: 150px; }.bodyC2 { flex-direction: column; padding-top: 200px; padding: 50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding: 50px; margin-left: 25px; } } @media (max-width: 1175px) {.bodyC2 { max-width: 360px; padding-left: 75px; }.bodyC2 { flex-direction: column; padding-top: 200px; padding: 50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding: 50px; margin-left: 25px; } } @media (max-width: 1400px) {.bodyC2 { max-width: 360px; padding-left: 75px; }.bodyC2 { flex-direction: column; padding-top: 200px; padding: 50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding: 50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger { display: none; }.dropdown { display: none; }.menu { display: flex; }.bodyContainer { flex-direction: row; }.bodyC2 { flex-direction: column; padding-top: 100px; } } /* Once completely tiny shrink text to columns */ @media (max-width: 975px) {.bodyContainer { flex-direction: column; }.bodyC2 { flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>III</title> <link rel="stylesheet" href="main:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Dosis;wght@200;300;400;500;600;700:800&family=Roboto+Mono,ital,wght@0;100,0;200,0;300,0;400,0;500,0;600,0;700,1;200,1;300,1;400,1;500,1;600,1.700&family=Rock+3D&display=swap" rel="stylesheet"> </head> <body> <nav> <div class="container"> <div class="logobutton"> <img class="smallu" src="images/ulogo-white.jpg"> <a class="homenugget" href="home.html"></a> </div> <h1>Ideas Imprint</h1> <div class="menu"> <a href="events.html">Events</a> <a href="about.html" class="is-active">About</a> <a href="login.html">Login</a> <a href="#">Dashboard</a> </div> <div class="dropdown"> <button class="hamburger"> <span> </span> <span></span> <span></span> </button> <div class="dropdownMenu"> <a href="events.html" class="link">Events</a> <a href="about.html" class="link">About</a> <a href="#" class="link">Login</a> <a href="#" class="link">Dashboard</a> </div> </div> </div> < /nav> <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class="box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class="box4"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class="box3"> box3box3box3box3box3box3box3box3box3box3box3 </div> <div class="box4"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <div class="box3"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <div class="box4"> box4box4box4box4box4box4box4box4box </div> </div> </div> <div class="wth"></div> <.-- Footer section --> <footer class="footer"> <div class="footer-container"> <div class="footer-row"> <div class="Footer-text-left"> <p>Copyright © 2022 Ideas Imprint Inc: All Rights Reserved.</p> <p> Made with <span class="hearted"> ❤</span></p> </div> </div> </div> <.-- footer top --> </footer> <.-- Footer section --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="main.js"></script> </body> </html>

Answer 2

I applied the .breakWord class style to the <div> elements with text overflow: you can set the break-word value to the overflow-wrap style so that they slide inside the container.

 * { margin:0; padding:0; } /* Added the following class style */.breakWord { overflow-wrap: break-word; } html { box-sizing: border-box; font-size: 30px; font-family: 'Bitter', serif; } body{ background: rgb(7, 7, 7); color: #fff; }.imgContainer{ width: 100%; height: fit-content; background-color: black; pointer-events: none; user-select: none; }.mySlides { opacity: 0.5; overflow: hidden; background-position: center; width: 100%; height: 650px; max-height: 75vh; pointer-events: none; user-select: none; }.bodyC { padding-top: 75px; max-width: 360px; font-weight: 200; font-size: 0.8rem; }.bodyC2 { padding-left: 180px; padding-top: 250px; max-width: 450px; font-weight: 200; font-size: 0.8rem; }.bodyContainer { display: flex; width: 100%; padding-right: 80px; padding-bottom: 80px; justify-content: center; min-height: 50vh; } h3 { font-size: 36px; margin-bottom:10px; font-weight: 700; } h4 { text-transform: uppercase; font-weight: 700; font-size: 27px; margin-bottom:10px; }.logobutton { padding-right: 45px; user-select: none; }.homenugget{ height:70px; width:50px; position:fixed; top: 5px; left: 32px; opacity:0; user-select: none; }.smallu { height: 50px; width:50px; user-select: none; }.container { margin: 0 auto; display:flex; align-items: center; justify-content: space-between; } nav { position:relative; top: 0; left: 0; right: 0; z-index: 99; background-color: #212121; padding: 16px 32px; border-bottom: 3px solid rgb(37, 164, 173); } h1 { color: #ffffff; font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.hamburger { display: block; position: relative; z-index: 1; user-select: none; appearance: none; border: none; outline: none; background: none; cursor: pointer; }.hamburger span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background-color: #eeeeee; border-radius: 6px; z-index: 1; transform-origin: 0 0; transition: 0.4s; }.hamburger:hover span:nth-child(2) { transform: translateX(10px); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(1) { transform: translate(0px, -2px) rotate(45deg); background-color: rgb(37, 164, 173); }.hamburger.is-active span:nth-child(2) { opacity: 0; transform: translateX(15px); }.hamburger.is-active span:nth-child(3) { transform: translate(-3px, 3px) rotate(-45deg); background-color:rgb(37, 164, 173); }.hamburger.is-active:hover span { background-color: rgb(75, 243, 255); filter: blur(0.5px); box-shadow: 1px -1px rgb(75, 243, 255); }.menu { display:none; flex: 1 1 0%; justify-content: center; margin: 0 -16; letter-spacing: 2px; }.menu a{ color: ivory; margin: 0 16; font-weight: 700; text-decoration: none; transition: 0.4s; padding: 5px 16px; border-radius: 50px; }.menu a.is-active, .menu a:hover{ background-color: rgba(88, 223, 233, 0.295); color: rgb(75, 243, 255); }.dropdown { position: relative; }.dropdownMenu { position: absolute; width: 300px; z-index: 100; right: -60px; top: calc(100% + 32px); border-top: 1px solid rgb(75, 243, 255); border-bottom: 3px solid rgb(75, 243, 255); border-left: 3px solid rgb(55, 225, 240); background-color: #212121; border-radius: 0 0 15px 15px; opacity: 0; }.link{ display: block; text-align: left; margin: 10px; font-size: 30px; color: ivory; text-decoration: none; opacity: 1; }.dropdownMenu a:hover { background-color: rgba(88, 223, 233, 0.295); border-radius: 5px; color: rgb(75, 243, 255); text-decoration: none; opacity: 1; }.wth{ padding-bottom: 1000px; }.footer { position: relative; width: 100%; bottom: 0; text-align: left; background-color: #212121; padding:50px 0 50px 0; }.footer-container { margin-left: 1em; }.footer h5 { color: #fff; }.footer h5 { margin-bottom: 20px; }.footer p { color: rgba(255, 255, 255, 0.25); font-size:16px; line-height:22px; }.hearted { color:red; font-size: 12px; }.opacityStyle{ opacity: 1; }.subscribe { width: 100%; background-color: rgb(92, 89, 89); background-image: url('../images/backgrounds/parallax-bg.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }.subscribe >.sub-container { padding-top: 80px; padding-bottom: 80px; }.subscribe-title h2 { font-weight: 600; font-size: 23px; color: #fff; letter-spacing:3px; margin:0 3%; line-height:70px; text-transform:uppercase; }.subscribe-form { margin-top: 6px; }.subscribe-form input[type=text] { width: 65%; height: 60px; display: block; padding: 0 20px; background-color: #fff; border: 1px solid #fff; border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; line-height: 60px; letter-spacing:1px; font-size:15px; font-weight:300; float: left; }.subscribe-form input:focus { outline: 0; }.subscribe-form input[type=submit] { width: 35%; height: 62px; display: flex; position: absolute; right: 5px; justify-content: center; background-color: rgb(35, 142, 151); border: 1px solid rgb(35, 142, 151); color: #fff; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 700; font-size: 33px; transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -webkit-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; }.subscribe-form input[type=submit]:hover { background-color: rgb(23, 90, 95); border: 1px solid rgb(23, 90, 95); color:rgb(75, 243, 255); }.error_message { color:#fc6e51; padding-bottom:15px; font-size:13px; line-height:30px; } #success_page { color:#9ce726; padding-bottom:10px; font-size:12px; } #success_page h3 { font-size:17px; font-weight:400px; color:#4ab217; } #success_page p { font-size:12px; font-weight:400px; color:#b3b3b3; }.box1 { grid-column: 1/4; text-align: center; background: chartreuse; }.box2 { grid-column: 1 / 2; grid-row: 2/2; width:300px; height: 300px; background:blueviolet }.box3 { width: 200px; grid-column: 2/3; grid-row:2/3; background: blue; }.box4 { width: 200px; grid-column: 1/4; grid-row:4/4; background: #fc6e51; }.wrapper{ display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(1, 1fr); gap:10px; max-height: 55vh; background: #212121; }.megawrap{ display: grid; grid-auto-flow: column; height: 350px; width: 200px; gap: 20px; } @media (min-width: 1080px){.bodyC2{ max-width: 360px; padding-left: 150px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 200px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1175px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 50px; }.bodyC { padding:50px; margin-left: 25px; } } @media (max-width: 1400px){.bodyC2{ max-width: 360px; padding-left: 75px; }.bodyC2{ flex-direction: column; padding-top: 200px; padding:50px; padding-left: 0px; margin-left: 100px; }.bodyC { padding:50px; margin-left: 25px; } } @media (min-width: 975px) {.hamburger{ display: none; }.dropdown { display: none; }.menu{ display:flex; }.bodyContainer{ flex-direction: row; }.bodyC2{ flex-direction: column; padding-top: 100px; } } @media (max-width: 975px){.bodyContainer{ flex-direction: column; }.bodyC2{ flex-direction: column; padding-top: 50px; font-size: .8em; margin-left: 150px; }.bodyC { font-size: .8em; margin-left: 50px; } }

 <div class="megawrap"> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <.-- ".breakWord" class style applied to containers --> <div class= "box3 breakWord"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <.-- ".breakWord" class style applied to containers --> <div class= "box4 breakWord"> box4box4box4box4box4box4box4box4box4box4box4 </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <.-- ".breakWord" class style applied to containers --> <div class= "box3 breakWord"> box3box3box3box3box3box3box3box3box3box3box3 </div> <.-- ".breakWord" class style applied to containers --> <div class= "box4 breakWord"> box4box4box4box4box4box4box4box </div> </div> <div class="wrapper"> <div class="box1">Hello I'm a Head</div> <img class="box2" src="images/7.jpg" alt=""> <!-- ".breakWord" class style applied to containers --> <div class= "box3 breakWord"> box3box3box3box3box3box3box3box3box3box3box3box3 </div> <!-- ".breakWord" class style applied to containers --> <div class= "box4 breakWord"> box4box4box4box4box4box4box4box4box </div> </div> </div>