Struggling to center a div within another div using margin auto

Hey there, I'm looking for some help with my code. Here's what I have:

.center{
    width: 100%;
    margin: 0 auto;
    border: 1px solid red;
}

.nav{
    background: #606060;
    width: 90%;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/stylesheet.css" />
        <title></title>
    </head>
    <body>
        <div class="center">
             <div class="nav">
                <p>Hello</p>
             </div>
        </div>
    </body>
</html>

I've experimented with .center without the width: property but it didn't work. I looked through different themes and solutions here but couldn't find an answer. The .nav div remains on the left side. Any assistance would be greatly appreciated. Thank you!

htmlcss

Answer №1

Apply the style margin:0 auto to the .nav class, not the .center class.

.center{
  width: 100%;   
  border: 1px solid red;
}

.nav{
  background: #606060;
  width: 90%;
  margin:0 auto;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/stylesheet.css" />
        <title></title>
    </head>
    <body>
        <div class="center">
             <div class="nav">
                <p>Hello</p>
             </div>
        </div>
    </body>
</html>

Answer №2

It's not necessary to specify margin: 0 auto; when the width is set to 100%. This rule is only needed if you want to center a division with a fixed width inside its parent div.

.center{
    width: 100%;
    border: 1px solid red;
}

.nav{
    background: #606060;
    width: 90%;
    margin: 0 auto;
}
<div class="center">
     <div class="nav">
        <p>Hello</p>
     </div>
</div>

Answer №3

Include the following styles in your .menu class

.menu {
 .
 .
 margin: 0 auto;
 text-align: center
}

Answer №4

When it comes to centering block level elements, a common issue is that they always fit within the 100% width of their container. To address this, I recommend using the inline-block display property instead.

.center{
            width: 100%;
            margin: 0 auto;
            border: 1px solid red;
            text-align:center;
        }

        .nav{
            background: #606060;
            width: 90%;
            display:inline-block;
        }
<div class="center">
            <div class="nav>
                <p>Ahoj</p>
            </div>
        </div>

Answer №5

.navigation-bar {
background-color: #606060;
width: 90%;
display: block;
margin: 0 auto;

}

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

Challenge with modifying CSS variable names in Angular SSR

Recently, I noticed that some of my CSS variable names are being changed to something else on the server-side rendering build, causing them not to work as expected. An example of this is: .color-black-75 { color: var(--black-75-color); } In my styles. ...

cssangular

Unable to display PHP variable in HTML

I am currently facing an issue while attempting to display user input that includes double quotes in an HTML form. When I echo the input, everything before the double quotes is being shown. For example, if the input is "6" Tropical Premium $8.99", only "6" ...

phphtmlvariablesecho

Tips for modifying jsFiddle code to function properly in a web browser

While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle ...

javascriptjqueryhtmlcss

Website layout looking unique due to pixel width adaptation from standard width

I'm currently working on a website with full width design. On my computer, the website displays as full width, but on other computers it shows extra space on the sides. How can I ensure that this website is truly full width? .wrapper_boxed { wid ...

htmlcss

Total Output Calculation

In my latest coding project, I have crafted a unique algorithm to calculate exam scores with the inclusion of interactive buttons! function incorrectResponse() { var calc = 0; var calc2 = 1; var divElement = document.createElement("div"); divEle ...

javascripthtml

Applying CSS to prevent elements from overlapping by adjusting their vertical positioning

I need some help with a CSS formatting question. My current setup works well, the menu's position adjusts based on screen size to be centered both vertically and horizontally. However, I'm facing an issue where elements start overlapping if the v ...

htmlcss

Ways to retrieve a specific item from a constantly changing knockout observableArray without employing a foreach loop

Why can I only access one property ('member_A') of an Element in an observableArray using an HTML <input>? I am attempting to add a new object of type abc() to the observableArray "list_of_abc" when the button "ADD To List of abc" is click ...

javascripthtmlknockout.jsknockout-mvc

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Hey everyone! I'm new to using React and I decided to try cloning Netflix by following a tutorial on YouTube. However, I've encountered an issue with rendering an image in a functional component. The error message I'm receiving is as follow ...

javascriptcssreactjsimage

Steps for changing an image with another image upon button click in Angular 6

I have a button with an image and text. When the button is clicked, I want to change both the image and content. Here's the code I'm currently using: <div class="btn-default"> <button name="Save" [ngClass]="[bntStyle]" (click)="submit ...

htmlcssangular6

Styling emails with CSS: Tips for customizing fonts

I've been experimenting with setting a personalized font for an email. Within the HTML code of the email, I included the fonts using this snippet: <head> <style> /* latin-ext */ @font-face { font-family: &ap ...

htmlcssemailhtml-email

The boundary of embedded components

I am looking for CSS code that will allow me to arrange all elements with specific indents, such as placing the first element on the left side of the page, followed by an image with some indentation, and so on. <div class="container-fluid"> &l ...

htmlcss

Create a radial-gradient() that covers two separate elements

Seeking to create a spherical appearance for a circle made of two semi-circular divs using background: radial-gradient(). Any ideas on achieving this effect without combining the two semi-circle divs into one circular div? [The decision to use two semi-ci ...

cssradial-gradients

Saving solely the content of an HTML list element in a JavaScript array, excluding the image source

One issue I am facing is with an unordered list in HTML which contains items like <ul id="sortable"> <li class="ui-state-default"><img src="images/john.jpg">John</li> <li class="ui-state-default"><img src="images/lisa.jpg ...

javascriptjqueryhtmlarraystext

Tips for resolving a post 405 error on a Windows 2012 R2 server

My test application is designed to record camera footage and send the file to a directory on my server. The main code for this application is shown below: <!DOCTYPE html> <html> <head> <script src="https://cdn.WebRTC-E ...

javascriptphphtmlposthttp-status-code-405

Creating a CSS grid with uniform row heights, each adjusting independently

I'm currently working on creating a CSS grid for a product display. My goal is to have rows with equal heights, but each row should adjust its height based on the tallest column within that specific row. Right now I have all rows set to be the same he ...

csscss-grid

Mastering the art of CSS float and positioning techniques

Struggling with CSS positioning yet again. I'm trying to design a webpage with one main element in the center, surrounded by 10 others. The challenge is to maintain consistency across different screen sizes (excluding mobile). However, every time I r ...

csscss-floatpositioning

Unusual behavior exhibited by MUI Grid in the presence of spacing

I am working on a code snippet that looks like this: <Box sx={{height:'100vh', background: '#f5f7fc', overflow:'auto'}}> <Grid container justifyContent={'center'} padding={2}> <Grid item ...

cssreactjsmaterial-uiflexbox

Text affected by mix-blend-mode glitch

Currently, I am experimenting with knockout text using the mix-blend-mode property. An interesting issue arises when I examine the responsiveness of my design by utilizing Developer tools in the browser console - there are faint lines that momentarily appe ...

htmlcssgoogle-chromemix-blend-mode

performing a GET request directly from a <script> element in the index.html file

I am currently developing an application that utilizes Angular.js on the client side and Node Express on the server side. On my server side, I am using a staticAsset module. Within my index.html file, I have a lengthy list of JavaScript files that need t ...

javascripthtmlnode.jsangularjsexpress

The preceding sibling function may encounter issues when multiple child tags are present

In this case, the XPath used to locate the checkbox is as follows: //td[text()='bbbb vvvvvvvvv']/preceding-sibling::td/div/input[@class='hidden'] However, despite using this XPath, the input element is not being captured. Only the "//t ...

javahtmlseleniumselenium-webdriverxpath