hello,
this is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color:#f7f7f7;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="flex-container-macbook-page">
<div class="section1-macbook-page">
<div class="left-side-macbook1-page">Some text goes here on the left side.</div>
<div class="middle-side-macbook1-page">Some text goes here in the middle.</div>
<div class="right-side-macbook1-page">
<div class="macbook-page-link1"><a href="#">To The Best Offer</a></div>
</div> </div>
<div class="section2-macbook-page">
<div class="left-side-macbook2-page">Some text goes here on the left side.</div>
<div class="middle-side-macbook2-page">Some text goes here in the middle.</div>
<div class="right-side-macbook2-page">
<div class="macbook-page-link2"><a href="#">To The Best Offer</a></div>
</div> </div>
<div class="section3-macbook-page">
<div class="left-side-macbook3-page">Some text goes here on the left side.</div>
<div class="middle-side-macbook3-page">Some text goes here in the middle.</div>
<div class="right-side-macbook3-page">
<div class="macbook-page-link3"><a href="#">To The Best Offer</a></div>
</div> </div>
</div>
</body>
</html>
and this is css code:
.flex-container-macbook-page {
display:flex;
flex-direction:column;
width: 80%;
height: 400px; /* Use 100vh for 100% height of the viewport */
background: #e0fbfc;
margin-left: 10%;
margin-right: 10%;
margin-top: -12rem;
}
.section1-macbook-page {
display: flex;
width:100%;
flex-direction: row;
margin-bottom: 15px;
margin-top: 2rem;
}
.left-side-macbook1-page {
display: flex;
justify-content: flex-start;
align-items: center;
width: 33.333%;
margin-left:4%;
}
.middle-side-macbook1-page {
display: flex;
justify-content: center;
align-items: center;
width: 33.333%;
}
.right-side-macbook1-page {
display: flex;
justify-content: flex-end;
align-items: center;
width: 33.333%;
margin-right:4%;
}
.section2-macbook-page {
display: flex;
flex-direction: row;
width:100%;
margin-bottom: 15px;
margin-top: 2rem;
}
.left-side-macbook2-page {
display: flex;
justify-content: flex-start;
align-items: center;
width: 33.333%;
margin-left:4%;
}
.middle-side-macbook2-page {
display: flex;
justify-content: center;
align-items: center;
width: 33.333%;
}
.right-side-macbook2-page {
display: flex;
justify-content: flex-end;
align-items: center;
width: 33.333%;
margin-right:4%;
}
.section3-macbook-page {
display: flex;
flex-direction: row;
width:100%;
margin-bottom: 15px;
margin-top: 2rem;
}
.left-side-macbook3-page {
display: flex;
justify-content: flex-start;
align-items: center;
width: 33.333%;
margin-left:4%;
}
.middle-side-macbook3-page {
display: flex;
justify-content: center;
align-items: center;
width: 33.333%;
}
.right-side-macbook3-page {
display: flex;
justify-content: flex-end;
align-items: center;
width: 33.333%;
margin-right:4%;
}
.macbook-page-link1,
.macbook-page-link2,
.macbook-page-link3 {
border-radius: 15px;
text-align: center;
flex-wrap: nowrap;
padding: 6px 20px; /* Adjusted padding */
background: #3498db;
}
.macbook-page-link1 a,
.macbook-page-link2 a,
.macbook-page-link3 a {
text-decoration: none;
color: #fff;
font-size: 1rem;
}
.macbook-page-link1:hover,
.macbook-page-link2:hover,
.macbook-page-link3:hover {
background-color: #1d6ea4;
}
the problem is : when you go to macbook page you see deviation in first class .in the first class the middle class and the link has deviation to left.
I tried everything but I couldn’t find the problem.
I have used this code :
*{border: 1px solid red!important}but I couldn’t solve the problem.
can someone tell me where it can be the fault?
do not use the menu because it has to be worked.
you can use the links from home page in the page self
thanks
The page I need help with: [log in to see the link]