My issue is that the text content is overflowing the designated box or container - any ideas on how to fix this problem?
I have attempted to utilize max-width and max-height, but unfortunately, I am unable to get them to function as intended.
Here's a snippet of the HTML structure:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Product Landing</title>
<link rel="stylesheet" href="product landing.css">
</head>
<body>
<main class="main-container">
<nav class="navbar-container">
<img src="logo.svg" class="logo-img">
<ul class="navbar">
<li class="select-items"><a href="#">Features</a></li>
<li class="select-items"><a href="#">Testimonials</a></li>
<li class="select-items"><a href="#">Pricing Table</a></li>
</ul>
</nav>
<section class="features">
<h1>The Advantages</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid</p>
<ul class="boxs">
<li>
<h2>GPS Tracking</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Heartbeat Analysis</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Prioritizing Security</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Innovative Concepts</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Cost-Saving Strategies</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
<li>
<h2>Proven Solutions</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illum temporibus minima et ab aliquid, enim veniam. Explicabo
eius non ea magni itaque aspernatur distinctio voluptatem minima,
est, dolorem consectetur! Dolorem?</p>
</li>
</ul>
</section>
<section class="testimonials"></section>
<section class="pricing"></section>
</main>
</body>
</html>
Now let's take a look at some CSS styling options:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.main-container {
background-color: brown;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: blueviolet;
}
.logo-img {
margin-right: auto;
}
.navbar > li {
display: inline-block;
margin: 0px 10px;
padding: 5px 10px;
text-align: center;
}Incorporate these properties for additional control over your layout elements:
.navbar > :nth-child(3) {
color: aquamarine;
background-color: cornflowerblue;
border: 2px solid cornflowerblue;
padding: 5px 5px;
border-radius: 50px;
}
.navbar > li > a {
color: blanchedalmond;
text-decoration: none;
transition: all 0.7s ease 0s;
}
.navbar > li > a:hover {
color: crimson;
}
.features {
background-color: red;
height: 100%;
text-align: center;
display: grid;
}
.boxs {
list-style: none;
}To enhance responsiveness, consider adding:
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-column-gap: 100px;