Wrapper Div at the Center

I'm currently working on aligning my webpage in the center using the following CSS:

.wrapper {
    display: flex;
    align-items: stretch;
    background: #fafafa;
    /*max-width: 1520px; */
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
    text-align: left;
    width: 960px;
    margin: 0 auto;
}

Despite setting the margin to auto, the page appears to be stuck to the left. All content is contained within the wrapper element, and I have validated both my HTML and CSS code with https://validator.w3.org. I don't see any incorrect tags that could be causing this issue.

Is there something crucial I am overlooking?

You can find the full code for the page by visiting these links: HTML, CSS

I would greatly appreciate any assistance!

htmlcssflexbox

Answer №1

Update your .wrapper css with the code below

.wrapper {
    display: flex;
    background: #fafafa;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
    max-width: 960px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
}

Alternatively, you can apply margin: auto; to the body

I trust this solution will be beneficial for you

/*
    DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
  font-family: 'Georgia', serif;
  background-image: url("path-to-stripe.png");
  max-width: 960px;
  /**background: #fafafa; **/
}

p {
  font-family: '{Poppins}',
  sans-serif;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #999;
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

.navbar {
  padding: 15px 40px;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
  display: flex;
  background: #fafafa;
  box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
  max-width: 960px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #082e59;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 2.9);
  color: #fff;
  transition: all 0.3s;
}

#sidebar.active {
  margin-left: -250px;
}

#sidebar .sidebar-header {
  padding: 20px;
  background: #082e59;
}

#sidebar ul.components {
  padding: 30px 0;
  border-bottom: 1px solid #47748b;
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {
  color: #7386D5;
  background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #fff;
  background: #7192b7;
}

a[data-toggle="collapse"] {
  position: relative;
}

a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
  content: '\e259';
  display: block;
  position: absolute;
  right: 20px;
  font-family: 'Glyphicons Halflings';
  font-size: 0.6em;
}

a[aria-expanded="true"]::before {
  content: '\e260';
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #082e59;
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #7386D5;
}

a.article,
a.article:hover {
  background: #082e59 !important;
  color: #fff !important;
}


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s;
}


/* ---------------------------------------------------
    MAP STYLES
----------------------------------------------------- */

#container1 {
  display: block;
  max-width: 1200px;
  min-height: 505px;
  position: auto;
  /* height: 475px; position: center;*/
  align-items: stretch;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
  #sidebar {
    margin-left: -250px;
  }
  #sidebar.active {
    margin-left: 0;
  }
  #sidebarCollapse span {
    display: none;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>NEA SCA Onboarding</title>

  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="style.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>


  <div class="wrapper">
    <!-- Sidebar Holder -->
    <nav id="sidebar">
      <div class="sidebar-header">
        <p style="text-align:center;"><img src="stateheader.png" alt="div" width="100px" align="middle" /></p>
        <h3 style="text-align:center;">Onboarding</h3>
      </div>

      <ul class="list-unstyled components">
        <li class="active">
          <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" style="text-align:center;">Compare By</a>
          <ul class="collapse list-unstyled" id="homeSubmenu">
            <li><a href="#">Population</a></li>
            <li><a href="#">Fertility Rate</a></li>
            <li><a href="#">Health Expenses (%GDP)</a></li>
            <li><a href="#">Military Expenses (%GDP)</a></li>
            <li><a href="#">Education Expenses (%GDP)</a></li>
          </ul>
        </li>
        <li class="active">
          <a href="#index.html" style="text-align:center;">About This Tool</a>
        </li>
      </ul>

      <ul class="list-unstyled CTAs">
        <li><a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">View data source</a></li>
        <li><a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">NEA/SCA Home</a></li>
      </ul>
    </nav>

    <!-- Page Content Holder -->
    <div id="content">

      <nav class="navbar navbar-default">
        <div class="container-fluid">

          <div class="navbar-header">
            <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                                <i class="fa fa-align-justify"></i>
                            </button>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
              <li><a href="#">Near East Asia (NEA)</a></li>
              <li><a href="#">South Central Asia (SCA)</a></li>
            </ul>
          </div>
        </div>
      </nav>

      <nav class="navbar navbar-default">
        <h2>Near East Asia Region</h2>
        <p>This tool uses data from the CIA World Factbook to compare different countries in your region.</p>

        <!-- MAP CODE STARTS HERE -->
        <div id="container1">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.js"></script>

          <script>
            // example data from server
            var series = [
              ["DZA", 75],
              ["EGY", 43],
              ["IRN", 50],
              ["IRQ", 88],
              ["ISR", 21],
              ["JOR", 43],
              ["KWT", 21],
              ["LBN", 19],
              ["LBY", 60],
              ["MAR", 4],
              ["OMN", 44],
              ["QAT", 44],
              ["SAU", 44],
              ["SYR", 44],
              ["TUN", 44],
              ["ARE", 44],
              ["YEM", 38]
            ];

            // Datamaps expect data in format:
            // { "USA": { "fillColor": "#42a844", numberOfWhatever: 75},
            //   "FRA": { "fillColor": "#8dc386", numberOfWhatever: 43 } }
            var dataset = {};

            // We need to colorize every country based on "numberOfWhatever"
            // colors should be uniq for every value.
            // For this purpose we create palette(using min/max series-value)
            var onlyValues = series.map(function(obj) {
              return obj[1];
            });
            var minValue = Math.min.apply(null, onlyValues),
              maxValue = Math.max.apply(null, onlyValues);

            // create color palette function
            // color can be whatever you wish
            var paletteScale = d3.scale.linear()
              .domain([minValue, maxValue])
              .range(["#EFEFFF", "#02386F"]); // blue color

            // fill dataset in appropriate format
            series.forEach(function(item) { //
              // item example value ["USA", 70]
              var iso = item[0],
                value = item[1];
              dataset[iso] = {
                numberOfThings: value,
                fillColor: paletteScale(value)
              };
            });

            // render map
            var map = new Datamap({
              element: document.getElementById('container1'),
              projection: 'mercator', // big world map
              // countries don't listed in dataset will be painted with this color
              fills: {
                defaultFill: '#F5F5F5'
              },
              data: dataset,
              setProjection: function(element) {
                var projection = d3.geo.equirectangular()
                  .center([37.4, 25.7])
                  .rotate([4.4, 0])
                  .scale(450)
                  .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
                var path = d3.geo.path()
                  .projection(projection);

                return {
                  path: path,
                  projection: projection
                };
              },
              geographyConfig: {
                borderColor: '#DEDEDE',
                highlightBorderWidth: 1,
                // don't change color on mouse hover
                highlightFillColor: function(geo) {
                  return geo['fillColor'] || '#F5F5F5';
                },
                // only change border
                highlightBorderColor: '#B7B7B7',
                // show desired information in tooltip
                popupTemplate: function(geo, data) {
                  // don't show tooltip if country don't present in dataset
                  if (!data) {
                    return;
                  }
                  // tooltip content
                  return ['<div class="hoverinfo">',
                    '<strong>', geo.properties.name, '</strong>',
                    '<br>Count: <strong>', data.numberOfThings, '</strong>',
                    '</div>'
                  ].join('');
                }
              }
            });

            map.legend();
          </script>
      </nav>
      </div>
      <!--MAP CODE ENDS HERE -->

    </div>
    <!--close content div-->
    <!--<p style="text-align:center;"><img src = "dos_divider.png" alt="div" align = "middle"/><p> -->
  </div>
  <!--close wrapper div> -->

  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <!-- Bootstrap Js CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#sidebarCollapse').on('click', function() {
        $('#sidebar').toggleClass('active');
      });
    });
  </script>


</body>

</html>

Answer №2

If you're looking to have your content centered, consider implementing this CSS modification where you add margin: auto to the #content div:

#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
margin: auto;

}

Answer №3

The issue lies in the fact that a fixed max-width of 960px has been applied to the body element, causing your wrapper to malfunction. By removing this limitation, the problem should be resolved.

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

Creating Your Own Image Hosting Website: Learn how to consistently display an HTML file with a specific image from the URL

I'm currently in the process of developing my own image hosting site at Everything is functioning as intended, but I am looking to make a change. Currently, when a shared image link is opened, it only displays the image. However, I would like it to ...

javascripthtmlregex.htaccess

The CSS styling is not being rendered correctly on the AngularJS HTML page

Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns: <table border="1" ng-repeat="table in xc.tables"> ...

javascripthtmlcssangularjs

How to execute a JavaScript function within a Jinja for loop

I am currently working on an HTML page where the variable schedule contains a series of sequential decimal numbers representing seconds. My goal is to develop a function in JavaScript/jQuery that can convert these decimal numbers into time format. However ...

javascripthtmljinja2

Using various alignment options for images on mobile devices

I've designed a theme with two columns, one for text and the other for images. I've structured it in HTML to display as: Text - Img Img - Text Text - Img Img - Text Text - Img Img - Text However, for mobile responsiveness, I want it to display ...

wordpresscsswordpress-theming

With Vue's new implementation of adding data attributes to the "*" selector, how can I adapt to this change?

Typically, I reset all margins/paddings by including the following code snippet at the beginning of my CSS: *, body { margin: 0; padding: 0; } This method usually works fine since it is overridden by subsequent selectors. However, Vue appends data att ...

cssvue.jsbuild

Troubleshooting the Ineffectiveness of the CSS Custom Property Url in Asp .Net

Working on styling some cards within an MVC project, I have a custom property in my CSS file called "--bg-img" which is defined as follows: background-image: linear-gradient(rgba(0, 0, 0, var(--bg-filter-opacity)), rgba(0, 0, 0, var(--bg-filter-opacity))) ...

cssasp.net-mvcasp.net-coreurlcss-variables

Sending array values from a dynamic input field in Angular 4 and processing them accordingly

I am currently exploring options on how to add and delete multiple input fields. When a user submits two or more fields, I want the results to be displayed in an array. This is my HTML form: <form method="post" [formGroup]="formData"> ...

jqueryhtmlangular

Is the PHP Ajax parameter missing during the upload process?

I'm attempting to do a simple upload, but I seem to be struggling. It could be that I'm not understanding it properly, or perhaps it's just too late at night for me to figure it out. After doing some research, I came across this example on ...

javascriptphphtmlajax

Link functioning properly for one item but failing for another

I am facing an issue with my index.html file that contains the following code: <li> <a href="imprint.html#imprint-link"> <div class="main-menu-title">IMPRINT</div> </a> </li> Clicking on the "IMPRINT" link loa ...

htmlcss

Tips for getting links to wrap or scroll within a column element in Angular

In my row element with two columns, I am facing an issue where the first column sometimes overlaps the second column due to a very long link in the problem.problem_description section. I want to find a way to have long links wrap or be scrollable. However, ...

htmlangulartwitter-bootstrapangular-ui-bootstrap

Is there a way to modify the default color when the header is assigned the "sticky" class?

Currently, I am in the process of building my own website and have implemented an exciting hover effect that randomly selects a color from an array and applies it when hovering over certain elements. However, once the cursor moves away, the color reverts b ...

javascripthtmljquerycssarrays

Have you ever wondered how to disable a tooltip in React Material UI after clicking on it? Let

I am working with a Material-UI tab component and I would like to include a tooltip feature. The issue I am facing is that the tooltip does not disappear when I click on the tab. It should hide after clicking on the tab. Currently, the tooltip remains vi ...

javascripthtmlcssreactjsmaterial-ui

Tips on saving php variable content in HTML "id"

Three variables are used in PHP: message_id, message_title, and message_content. Their content is stored inside HTML 'id' for later use with jQuery. Example: Variables: $id_variable = $rows['id_mensagem']; $message_title_edit = $rows ...

javascriptphpjqueryhtml

The elements at the bottom of the Google homepage do not stay in place when hovering

I'm facing an issue and seeking guidance on how to make the footer and 'Google in different languages' fixed when hovering over the buttons. I'm attempting to create this on my own without referencing the Google homepage code in Chrome ...

htmlcss

How to remove an item with a click using jQuery and PHP?

I have a question about deleting an item I just clicked on. I'm having trouble tracking it and resorting to drastic measures (like posting here) to delete everything in the list. Code Snippet: <div class="image-list"> <?php $count = 1; if ( ...

phpjqueryhtml

Styling conditionally with Dash Bootstrap using an IF statement

I am looking to implement a feature where text in a column is displayed in two different colors based on its value, using Dash bootstrap and various HTML components. For example, consider the following table: Value Yes No Yes Yes No The goal is to displa ...

pythonhtmlcssbootstrap-5

What is the best way to position a div in relation to a table header (th) but not inside it?

I'm trying to create a table header that displays a help text (div) when clicked on. However, the help div is causing the table header to be larger than the other headers. Below is the code snippet: #help_box { border-radius: 20px; ba ...

htmlcsshtml-tableorientation

How can I implement a progress bar that mimics an exchange platform behind data-table components? [Using Vue and Vuetify]

I am working on a cryptocurrency exchange book simulator and I am trying to implement a progress bar that will be displayed behind the values in a table. https://i.stack.imgur.com/9gVsY.png This is the template for my data-table: < ...

javascripthtmlcssvue.jsvuetify.js

Guide on validating a dropdown using template-driven forms in Angular 7

Having trouble validating a dropdown select box, possibly due to a CSS issue. Any suggestions on how to fix this validation problem? Check out the demo here: https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.compo ...

csstypescriptvalidationangular8

Tips for toggling the visibility of an element when a button is clicked in React

In my todo list, I need to display the details of each item when clicked on a button. There are two buttons available: "View Details" and "Hide Details". Below is the code snippet: class Todos extends React.Component{ construc ...

javascripthtmlcssreactjs