After creating a div and applying the "display: grid" property to it, everything seemed fine at first. However, I encountered an issue with a margin that appeared. I'm not sure if this is due to incorrect code on my part or some other reason. I attempted to use "margin: 0 auto;" but it actually made things worse! I also double-checked for any margins or paddings on the container element. See the problem here
$('#owl-carousel').owlCarousel({
loop: true,
margin: 30,
dots: true,
nav: false,
rtl: true,
items: 2,
}).text {
text-align: center;
height: 100px;
background: #0b0a0d;
color: #FFF;
}
.text .logo a {
margin: 0;
line-height: 100px;
font-size: 48px;
font-family: 'Zen Dots', cursive;
}
.nav {
background: #0c70de;
color: #FFF;
display: flex;
z-index: 9999;
}
.text .logo a {
color: #FFF;
text-decoration: none;
}
.nav ul {
margin: 0 auto;
padding: 0;
display: flex;
}
ul li {
padding: 20px;
list-style: none;
}
ul li a {
color: #FFF;
display: block;
text-decoration: none;
text-transform: uppercase;
font-family: 'Changa', sans-serif;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.contain {
margin: 0 auto;
max-width: 1200px;
width: 100%;
margin-top: 50px;
}
.item {
align-items: center;
display: flex;
height: 300px;
justify-content: cent...