Okay so I am running into a bit of an issue with a navigation bar I am attempting to use. This is what I want the end result to look like you can see the navigation bar is flush to the top of the browser window and stretches full length side by side. This is active in my about me page, in my testimonials page its not stretching across the screen like the about me page and on my main homepage it shows there is a bit of a border around the navigation bar https://imgur.com/a/EBtCJb0 All 3 images are in the link above https://codepen.io/Pirate_tat87/pen/yLxvKmV?editors=1100 I have been using codepen to test the information. also a big issue that I have been running into if anyone can be kind enough to teach me on it. any time I add any new CSS to my style.css page i can't get it to distinguish the coding different from all the other CSS that I do even though i name it with an ID or Class
thx. Well, div.topnav inside testimonial page differs from the one in about page. It has additional (inline) style: position:absolute; Code (CSS): which prevents it from stretching to full width. If it were to be removed then layout may look broken? Hmm, I guess the easiest way to make it full width is perhaps by adding another style rule width:100%; Code (CSS):
With me removing the code position: absolute; left: 0px; top: 0px; width: 100px; Code (CSS): This is now how it is now displayed.
Yes I think you also need to remove the display:flex; Code (CSS): line from <body>. You'll find this inside /Testimonial/style.css line 12
Okay so here is the full code You can see when you run it the issue that i'm running into <html> <head> <!-- Swiper CSS --> <link rel="stylesheet" href="css/swiper-bundle.min.css"> <!-- CSS --> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="topnav"> <a href="#home">Home</a> <a href="#contact">Contact</a> <a href="https://piratesdmcaservice.com/ContactMe/Index.html">About</a> <a class="active" href="Testimonial/index.html">Testimonials</a> </div> <div class="slide-container swiper"> <div class="slide-content"> <div class="card-wrapper swiper-wrapper"> <div class="card swiper-slide"> <div class="image-content"> <span class="overlay"></span> <div class="card-image"> <img src="images/profile1.jpg" alt="" class="card-img"> </div> </div> <div class="card-content"> <h2 class="name">David Dell</h2> <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p> <button class="button">View More</button> </div> </div> <div class="card swiper-slide"> <div class="image-content"> <span class="overlay"></span> <div class="card-image"> <img src="images/profile2.jpg" alt="" class="card-img"> </div> </div> </div> </div> <div class="swiper-button-next swiper-navBtn"></div> <div class="swiper-button-prev swiper-navBtn"></div> <div class="swiper-pagination"></div> </div> </body> <!-- Swiper JS --> <!-- JavaScript --> <script src="js/script.js"></script> </html> HTML: /* Google Fonts - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #EFEFEF; } .slide-container{ max-width: 1120px; width: 100%; padding: 40px 0; } .slide-content{ margin: 0 40px; overflow: hidden; border-radius: 25px; } .card{ border-radius: 25px; background-color: #FFF; } .image-content, .card-content{ display: flex; flex-direction: column; align-items: center; padding: 10px 14px; } .image-content{ position: relative; row-gap: 5px; padding: 25px 0; } .overlay{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #4070F4; border-radius: 25px 25px 0 25px; } .overlay::before, .overlay::after{ content: ''; position: absolute; right: 0; bottom: -40px; height: 40px; width: 40px; background-color: #4070F4; } .overlay::after{ border-radius: 0 25px 0 0; background-color: #FFF; } .card-image{ position: relative; height: 150px; width: 150px; border-radius: 50%; background: #FFF; padding: 3px; } .card-image .card-img{ height: 100%; width: 100%; object-fit: cover; border-radius: 50%; border: 4px solid #4070F4; } .name{ font-size: 18px; font-weight: 500; color: #333; } .description{ font-size: 14px; color: #707070; text-align: center; } .button{ border: none; font-size: 16px; color: #FFF; padding: 8px 16px; background-color: #4070F4; border-radius: 6px; margin: 14px; cursor: pointer; transition: all 0.3s ease; } .button:hover{ background: #265DF2; } .swiper-navBtn{ color: #6E93f7; transition: color 0.3s ease; } .swiper-navBtn:hover{ color: #4070F4; } .swiper-navBtn::before, .swiper-navBtn::after{ font-size: 35px; } .swiper-button-next{ right: 0; } .swiper-button-prev{ left: 0; } .swiper-pagination-bullet{ background-color: #6E93f7; opacity: 1; } .swiper-pagination-bullet-active{ background-color: #4070F4; } @media screen and (max-width: 768px) { .slide-content{ margin: 0 10px; } .swiper-navBtn{ display: none; } } /* Add a black background color to the top navigation */ .topnav { background-color: #878787; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Add a color to the active/current link */ .active { background-color: #04AA6D; color: white; } Code (CSS):
Update, I was able to get it resolved it did have to do with the display:flex but also something else, I dont' remember sorry. but now my next issue is I would like to get the box back in the center of the page like it should be without messing up the nav bar at the top This is how it currently looks, any ideas