Search code examples
htmlcssweb-deployment

Boxes Always Crashing into My navbar unable to fix it

here this is what happening

Html -

<!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">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/services.css">
    <title>Arson Industries Limited</title>
</head>

<body>

    <nav class="navbar-background">
        <ul class="nav-list">
            <div class="logo"><img src="image/logo.png" alt="logo"></div>
            <li><a href="/index.html">Home</a></li>
            <li><a href="/about.html">About</a></li>
            <li><a href="/contacts.html">Contact Us</a></li>
            <li><a href="/services.html">Services</a></li>
        </ul>
        <div class="rightnav">
            <form action="/search.html" method="get">
                <input type="text" name="query" id="Search" placeholder="Search">

                <button class="btn btn-sm">Search</button>
            </form>
        </div>
        <div class="services-section">
            <div class="inner-width">
                <h1 class="section-title">Our Services</h1>
                <div class="border"></div>
                <div class="services-container">

                    <div class="service-box">
                        <div class="service-icon">
                            <i class="fas fa-paint-brush"></i>
                        </div>
                        <div class="service-title">Web Designs</div>
                        <div class="service-desc">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eaque ratione rem porro, nihil.
                        </div>
                    </div>

                    <div class="service-box">
                        <div class="service-icon">
                            <i class="fas fa-code"></i>
                        </div>
                        <div class="service-title">Web Development</div>
                        <div class="service-desc">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eaque ratione rem porro, nihil.
                        </div>
                    </div>

                    <div class="service-box">
                        <div class="service-icon">
                            <i class="fas fa-brush"></i>
                        </div>
                        <div class="service-title">Responsive Designs</div>
                        <div class="service-desc">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eaque ratione rem porro, nihil.
                        </div>
                    </div>

css-

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font-family: "montserrat", sans-serif;
    box-sizing: border-box;
}

.services-section {
    background: url(bg.jpg);
    background-size: cover;
    padding: 60px 0;
}

.inner-width {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
    overflow: hidden;
}

.section-title {
    text-align: center;
    color: #ddd;
    text-transform: uppercase;
    font-size: 30px;
}

.border {
    width: 160px;
    height: 2px;
    background: #82ccdd;
    margin: 40px auto;
}

.services-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.service-box {
    max-width: 33.33%;
    padding: 10px;
    text-align: center;
    color: #ddd;
    cursor: pointer;
}

.service-icon {
    display: inline-block;
    width: 70px;
    height: 70px;
    border: 3px solid #82ccdd;
    color: #82ccdd;
    transform: rotate(45deg);
    margin-bottom: 30px;
    margin-top: 16px;
    transition: 0.3s linear;
}

.service-icon i {
    line-height: 70px;
    transform: rotate(-45deg);
    font-size: 26px;
}

.service-box:hover .service-icon {
    background: #82ccdd;
    color: #ddd;
}

.service-title {
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.service-desc {
    font-size: 14px;
}

navbar css -

* {
    margin: 0;
    padding: 0;
}


.nav-list {
    width: 50%;
    /* background-color: black; */
    display: flex;
    align-items: center;
}

.nav-list li {
    list-style: none;
    padding: 26px 30px;
}

.nav-list li a {
    text-decoration: none;
    color: white;
}

.rightnav {
    /* background-color: blue; */
    width: 50%;
    text-align: right;

}

.logo {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    width: 45px;
    border: 3px;
    border-radius: 50%;
    height: 45px;

}

.navbar-background {
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    cursor: pointer;
    background-color: rgb(38 46 48 / 37%);
    z-index:1;
    
}

#Search {
    padding: 5px;
    font-size: 17px;
    border: 2px solid grey;
    border-radius: 9px;
}

.background {
    background: rgba(0, 0, 0, 0.7) url("../image/nature.jpg");
    background-size: cover;
    background-blend-mode: screen;  

}

.box-main {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 50%;
    margin: auto;

}

.firstsection {
    height: 100vh;
    margin-top: -61px;
}

.firsthalf {
    left: 0;
    line-height: 2;
    /* og 200 hai height */
    /* margin-top: -100px; */
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%
}

body {
    height: 100vh;
    overflow-y: hidden;
      
}

.btn {
    padding: 8px 20px;
    margin: 7px 0;
    border: 2px solid white;
    border-radius: 8px;
    background: none;
    color: white;
    cursor: pointer;
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;

}

.btn:hover {
    box-shadow: 0 0 10px 0 #e3f0ee inset, 0 0 20px 2px #bebd82;
    border: 3px solid #e1ebea;
}

I tried fixing it by doing some changes in margin and padding but my search bar is just stuck on that place nothing seems to work I copied this template from internet i tried making My own but that box problem was coming that time too so i thought my code has some mistakes so i tried to copy paste it from internet and try doing some changes but idk why its not working if this question is stupid my apologies i am a beginner

Solution

  • Your navbar does not have a closing tag. Change it like this. It worked for me.

        <nav class="navbar-background">
    <ul class="nav-list">
        <div class="logo"><img src="image/logo.png" alt="logo"></div>
        <li><a href="/index.html">Home</a></li>
        <li><a href="/about.html">About</a></li>
        <li><a href="/contacts.html">Contact Us</a></li>
        <li><a href="/services.html">Services</a></li>
    </ul>
    <div class="rightnav">
        <form action="/search.html" method="get">
            <input type="text" name="query" id="Search" placeholder="Search">

            <button class="btn btn-sm">Search</button>
        </form>
    </div>
</nav>