Issue with Bootstrap Navbar creating unnecessary space on the right side

Despite my efforts to address this issue using previous solutions, nothing seems to work for me. The older recommendations don't seem to apply anymore due to changes in Bootstrap. So I'm reaching out again for help, sorry about that.

I came across a theme on CodePen that I'm tweaking to enhance my understanding of Bootstrap based on advice from FreeCodeCamp. However, I'm struggling with one simple thing.

The navbar is causing unnecessary white space along the right margin throughout the entire website.

You can see it here: http://codepen.io/Er-c/pen/YGzkmG/

Here's the relevant code (I believe)

<nav class="navbar navbar-fixed-top">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      <a class="navbar-brand page-scroll" href="#page-top">
      </a>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right links">
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li><a class="page-scroll" href="#about">About</a></li>
        <li><a class="page-scroll" href="#services">Services</a></li>
        <li><a class="page-scroll" href="#news">News</a></li>
        <li><a class="page-scroll" href="#portfolio">Portfolio</a></li>
        <li><a class="page-scroll" href="#clients">Clients</a></li>
        <li><a class="page-scroll" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Any suggestions on how to remove the excess white space on the right?

Imgur

I feel completely stuck.

htmlcsstwitter-bootstrapnavbar

Answer №1

The issue you're facing is not actually with the navigation bar, but rather with the right padding on the cityscape. The .col- classes come with a default padding-right, which is causing padding on the right side of your main #about .row.pt-30 div.

There are several ways to address this problem. Many people on Stack Overflow suggest adding a "no right padding" class like

.dont-pad-me {padding-right: 0}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dont-pad-me">

However, in this scenario, it might be simpler to just replace

<div class="row pt-30">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <img class="peeping-tom" src="http://i59.tinypic.com/awsxg2.png" alt="#">
  </div>
</div>

with

<div class="container-fluid pt-30">
    <img class="peeping-tom" src="http://i59.tinypic.com/awsxg2.png" alt="#">
</div>

Answer №3

To resolve the problem, simply include overflow-x: hidden; in the body tag.
Note that removing the navbar did not solve the issue; there may be excessive code causing the problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The navigation bar initially fills the width of the screen, but does not adjust to match the width of the table when scrolling

I've spent the last 2 hours playing around with CSS, using width:100% and width:100vw, but nothing seems to be working. Currently, the navigation bar fits perfectly across the screen on desktop browsers, so there doesn't seem to be an issue ther ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Creating a bordered triangle using only CSS

Looking to create a message holder with a triangular tip bordered shape? I've successfully crafted the tip using two triangles: #triangle-border { width: 0px; height: 0px; border-style: solid; border-width: 0 100px 80px 100px; bor ...

htmlcss

Trigger a function when the browser automatically populates an input field

I am attempting to trigger a function that can detect if the browser has autofilled a field and then add a specific class to it. After finding a thread with a solution that mostly works, mentioned here: Here is how I implemented it: $.fn.allchange = fun ...

javascriptjqueryhtmlautocompletecallback

There was an issue encountered when trying to call a PHP file within an HTML table using Ajax and data.html

For a small project, I have various news items that need to be included from the "news_all.php" file into table data within the "dashboard.php" file. Due to the predefined root structure restrictions, using include('news.php') is not an option. I ...

javascriptphphtmlajaxjson

expanding a div to cover the entire width

Recently, I encountered an issue with a div element positioned at the beginning of a block. To center it on the page, I utilized flexbox and successfully achieved the desired result. My CSS code to center the div: .elementor-element-acf3e44{ display: fl ...

htmlcssflexbox

Hide the Bootstrap tab pane and disable the active class on the link

There are several inquiries regarding this subject, but I have yet to discover a solution for removing the .active class from .nav-link upon being clicked. Below is the code snippet that I have experimented with: $('.nav-link').on('click&ap ...

jquerytwitter-bootstrapbootstrap-4

The module 'myapp' with the dependency 'chart.js' could not be loaded due to an uncaught error: [$injector:modulerr]

Just starting out with Angular.JS and looking to create a chart using chart.js I've successfully installed chart.js with npm install angular-chart.js --save .state('index.dashboard', { url: "/dashboard", templateUrl ...

javascriptjqueryhtmlangularjscharts

Incorporating Background Image with CSS Gradient - A Winning Combination!

Can anyone help me figure out what's wrong here? The gradient is working fine, but the image isn't showing up. You can view the page on my Wordpress site at: body { background-color: #FFF !important; /* setting a fallback color if gradi ...

cssbackground-image

What strategies can we implement to ensure consistency in visual styles and templates across our microservices?

Our team is currently working on multiple microservices simultaneously. While traditional microservice architecture discourages code sharing and reuse between services, we are considering the benefits of consistent styling across all services that have Web ...

cssstylesmicroservices

Splitting the div into two columns

I've encountered various solutions to this issue, but when I integrate an Angular2 component inside the divs, it fails to function properly. Here is my progress so far: https://i.stack.imgur.com/qJ8a9.jpg Code: <div id="container"> <div ...

javascriptcssangular

HTML Techniques: Flipping the Script - Writing Characters from Right to Left

In order to showcase the temperature in degrees Celsius, I have implemented a placement technique using absolute positioning. Consequently, the °C symbol will persist in its designated spot. To achieve the desired presentation, the text should be displaye ...

htmlcss

What is the best way to restrict datalist options while preserving the "value" functionality?

After finding a creative solution by @Olli on Limit total entries displayed by datalist, I successfully managed to restrict the number of suggestions presented by a datalist. The issue arises from the fact that this solution only covers searching through ...

javascripthtmlhtml-datalist

The React task list updates the todo items on change, rather than on submission

As a newcomer to React, I have embarked on the classic journey of building a todo app to learn the ropes. Everything seems to be functioning smoothly except for one minor hiccup: When I input a new todo and hit "submit", it does get added to my array but d ...

javascripthtmlreactjscomponents

Is there a native horizontal divider available in Bootstrap 4?

Is there a predefined horizontal divider in Bootstrap 4? I currently have this: <style type="text/css> .h-divider{ margin-top:5px; margin-bottom:5px; height:1px; width:100%; border-top:1px solid gray; } </style> However, I would prefer t ...

htmlcssbootstrap-4twitter-bootstrap-4

I encountered the "Unable to locate element: no such element" error even though the ID provided is definitely accurate

Attempting to click on the "OK" button in a pop-up using selenium and Python, I encountered an error "no such element: Unable to locate element" despite being confident that my id is 100% correct. > <a class="dxm-content dxm-hasText dx dxalink&q ...

pythonhtmlselenium

Adjust focus dynamically on pressing enter in an HTML form

I am currently working on adjusting the functionality of my HTML input form to change focus upon pressing the enter key. I need to trigger the saveValue() function from the input field when the enter key is pressed and then move the focus to the next input ...

javascriptjqueryhtmlcssangularjs

How can I apply a blurred effect to the background image of a jumbotron in Bootstrap-vue without affecting the clarity of the text overlay

I need help figuring out how to blur the background image of my jumbotron without blurring the text on top. <b-container fluid class="text-center"> <div> <b-jumbotron class="jumbotron"> <p style=& ...

cssvue.jsbootstrap-4bootstrap-vue

How can CSS Bootstrap flex width be used to prevent parent element from expanding too much with long, single line text? Utilizing ell

​Having encountered a tricky situation with CSS and flexbox, I found myself needing to implement the following properties: ​text-overflow: ellipsis; ​white-space: nowrap; ​overflow: hidden; However, when the text was too long, it caused t ...

htmlcssbootstrap-4flexboxwidth

Unable to locate the included file

When trying to add messages to my ejs template welcome.ejs from messages.ejs, I use the following include method: <%- include ('views/partials/messages.ejs;') %> '''https://i.sstatic.net/OYHZO.png Here are all the files in ...

htmlnpmejs

There are various reasons why React components do not utilize explicitly defined styles

I've encountered a puzzling issue while working on a React component that includes other components. Despite specifying styles in the parent component for its children, the specified styles are not being applied. Strangely enough, when I enclose the c ...

javascripthtmlcssreactjs