The divs are being filled with Bootstrap's separater and list-group components

Check out my pen: http://codepen.io/helloworld/pen/yyoJGR

I'm wondering about why the white separator and list grouping are flowing through the divs or the parent row in this code?

<div class="container columnStyle">
  <div class="row">
    <div class="row-same-height">
        <div class="col-xs-3 col-xs-height">
          <img class="img-responsive" src="http://s7.postimg.org/agarkavmj/whoiswho.png"></img>
      </div>
      <div class="col-xs-9 col-xs-height" >
        <div class="container">
          <div class="row">
            <div class="page-header">
                <h1>Who is who
                  <p>
                    <small>Organization & Processes</small>
                  </p>
                </h1>                
              </div>
          </div>
        </div>
        <div class="container">
          <div class="row">
             <ul class="list-group">
               <li class="list-group-item">Org Charts  </li>
               <li class="list-group-item">GAM / KAM Charts</li>
               <li class="list-group-item">Process flow</li>             
            </ul>
         </div>
        </div>
      </div>       
    </div>
  </div>
</div>


.columnStyle{
  background: #006AB3;
}

Answer №1

The reason for this issue is that the class .container is being used multiple times in your codebase. This particular class has a fixed width of 1170px.

.container {
width: 1170px;
}

To resolve this, you should only have one instance of .container as the wrapper element. Inside this container, remove any additional instances of .container and instead use the class .row for those elements.

If you want to see an example of this solution in action, check out the following link: http://codepen.io/anon/pen/ogeLRb

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

Challenges with resizing images in SVG using D3

I have an SVG image created using d3. I am facing an issue where the svg is extending beyond its parent div container. Here is the code snippet: <div id="test" style="{width: 500px; height:500px;}"> <svg></svg> </div> ...

Tips for choosing checkboxes that have a opacity of 0.5

Is there a way to target checkboxes with an opacity of 0.5? The selector :checkbox[style~='opacity: 0.5'] seems to be ineffective in selecting them. ...

Group all 3 elements with a wrapper

I'm facing a challenge in trying to enclose 3 divs inside one wrapping div. I have successfully wrapped up 2 divs, but the third one is proving to be difficult. To see my progress so far, you can check out my JSFiddle here: http://jsfiddle.net/cz9eY/ ...

Is there a way to rotate a div without utilizing the "transform" CSS property?

I am currently utilizing a plugin from the SVG library to render graphics within a div (). However, I am encountering an issue when attempting to rotate it using the "transform" property. The rotation is purely visual and does not alter the X and Y axes of ...

Issue with function incorrectly computing values and returning NaN

My challenge is to develop a countdown timer, but it keeps returning NaN instead of counting down. I have multiple counters in place - one that counts down, another that counts up until the stop time specified by stoptime, and a third that kicks in after s ...

Display information on a web page based on user input using HTML

I've hidden other p tags and divs using display:none, How can I make them visible after inputting my name? I'd like to type in my name and reveal all the content within the previously hidden div <form method="post"> <p> < ...

Repeated data submissions occur when using a modal form

I have a dataTable List with buttons attached to each row as shown below: https://i.sstatic.net/9vujB.png When a button is clicked, a Modal form is displayed. The modal is uniquely generated for each row in the table and has a different ID. https://i.ss ...

Minimize the entire project by compressing the .css, .js, and .html files

After recently incorporating Grunt into my workflow, I was thrilled with how it streamlined the process of minifying/concatenating .css files and minifying/uglify/concatenating .js files. With Grunt watch and express, I was able to automate compiling and ...

Discovering the magic of Bootstrap 5 and mastering its classes

Currently facing an issue with the me and ms classes while learning to build a navbar. The requirement is for elements one and two to be left-aligned using the ms class, and elements three and four to be right-aligned using the me class. However, the eleme ...

Unable to access the 'localStorage' property from 'Window': Permission denied

Check out my website www.abc.com Incorporating an iframe in www.abc.com using <iframe src="www.xyz.com"></iframe> An issue has arisen: Error message: "Failed to read the 'localStorage' property from 'Window': A ...

Error: unexpected syntax error at the end of the for loop in PHP MySQL

I encountered a puzzling issue with the "endif" statement after properly implementing code I found on YouTube with MySQL. <?php <?php for($x = 1; $x <= $pages; $x++); ?> <a href="?pages=<?php echo $x; ?>&per-page=< ...

Google Maps introduces a new feature that creates a blur effect on

Currently, I am utilizing the sample code provided below to superimpose an element on a Google map. <!DOCTYPE HTML> <html> <head> <title>Google Map Test</title> <style> html, body { margin: 0; ...

Sending a form with text and images through the use of PHP and Ajax

I am facing a challenge with uploading text and images from an HTML form to a database using AJAX for execution. I have attempted solutions on this page and this page, but none of them seem to work for me. Below are the codes I am working with: HTML Form ...

Unspecified variable in AngularJS data binding with Onsen UI

I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code: <!doctype html> <html lang="en" ng-app="simp ...

A unique Javascript feature that switches the text on various buttons

As someone who is relatively new to Javascript and web development, I am currently working on a project that involves creating multiple text areas for users to input and save text. Each text area is accompanied by a button with a unique ID that functions a ...

Dynamic HTML element

I created an input number field and I want to dynamically display the value of this field in a container without having to refresh the page. I am currently using ajax for this purpose, but unfortunately, I still need to reload the page. HTML: < ...

What's the process for converting offsetX and offsetY pixel coordinates to percentages?

Currently, I am working on a project where I need the offsetX and offsetY coordinates to be displayed in percentage (%) format while hovering over a div element. By default, these coordinates are shown in pixels. Here is an example of the structure: < ...

Switching out CSS files on the fly in ASP.NET

Looking to dynamically change the CSS file being used in my ASP.NET Web Application when it's running. Imagine I have two CSS files, red.css and blue.css. I attempted the following method: In the Master Page, I have this link: <link rel="Styles ...

The div element is not adjusting its size according to the content it

Essentially, I want the #main-content div to expand so that its content fits inside without overlapping, as shown in the codepen example. I've been unsuccessful in implementing the clearfix or overflow:hidden solutions so far. It's puzzling why ...

Experiencing discrepancies in pixel height while conducting tests using Nightwatch

Let me start by sharing some details about my machine setup: Operating System: CentOS 7 Graphics Drivers: kmod-nvidia (dedicated GPU) I am currently testing a webpage using Nightwatch, and one of the requirements is to ensure that a background image&apo ...