Struggling to get my DIV container perfectly centered

I am having trouble centering my Div container with the images. I attempted using margin 0 auto; and adding a specified width, but it's not working as expected.

body{
margin: 0px;
}

.main{
height: 950px;
background:  url(../Images/Mountain.jpg) center center/cover no-repeat; 
}

@media screen and (min-width: 1000px;){
#container{
height: 1000px;
    width: 1000px;
    margin: 0 auto;
 }
}

.header{
margin-top: 0px;
width: 100%;
}

.logo{
float: left;
margin-top: 10px;
margin-left: 50px;
}

nav{
float: right;
margin-top: 26px;
margin-right: 50px;
}

.navBar{
color: #fff;
font-size: 20px;
margin-left: 25px;
text-decoration: none;
}

.navBar:hover{
text-decoration: underline;
}

span{
width: 100%;
}

h1{
font-size: 80px;
color: #fff;
text-align: center;
clear: both;
padding-top: 200px;
}

h2{
font-size: 36px;
color: #fff;
text-align: center;
clear: both;
margin-top: 50px;
}

/*Header Section*/

#head{
width: 100%;
height: 400px;
background: url(https://static.pexels.com/photos/6934/beach-vacation-water-summer.jpg) center center/cover no-repeat; 
}

.port{
padding-top: 75px;
}

.portfolio{
width: 300px;
height: 250px;
}

.padding{
  margin-left: 50px;
}
.container_port{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>-------</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="shortcut icon" type="text/css" href="http://placehold.it/50x50">
<link rel="stylesheet" href="CSS/Style.css">

</head>
<body>
<div id="head">
<div class="header">
<img class="logo" src=http://placehold.it/100x100>

<nav>
<a class="navBar" href="#">Home</a>
<a class="navBar" href="#">Portfolio</a>
<a class="navBar" href="#">Blog</a>
<a class="navBar" href="#">Testimonials</a>
</nav>
</div>
<span>
<h1 class="port">Portfolio</h1>
</span>

</div>
<div id="container_port">

<div class="one">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="two">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="three">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="four">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>

</div>
</body>

htmlcss

Answer №1

Here is a solution that may bring you closer to your desired outcome:

#container_port {
  text-align: center;
}

UPDATE: I would like to point out that in your CSS code, you have referred to ".container_port" as a class when it should be an ID denoted by "#container_port".

Answer №2

Switching the image element from inline-block to block-level can make a difference in its display, or you could opt for margin: 0 50% instead.

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

In JavaScript, you can ensure that only either :after or :before is executed, but not both

My html slider is causing me some trouble <div class="range-handle" style="left: 188.276px;">100,000</div> Upon loading the page, I noticed that in Firebug it appears like this https://i.sstatic.net/Rgqvo.png On the actual page, it looks li ...

javascriptcss

How to create a self-contained div in VueJS using Tailwind CSS without affecting other elements

I'm feeling completely overwhelmed right now. Attached is a picture showing the issue I'm facing: The user list layout is on the right The chat content in the middle should be scrollable vertically The bottom div should stay fixed in place witho ...

htmlcsslaravelvue.jstailwind-css

Unusual problem detected with scrolling fixed div upwards

I have encountered a peculiar issue while attempting to fix a div containing other nested divs. My goal is to have the .menu div remain visible and fixed at the top of the page while scrolling, hiding the .slideshow_head div. However, despite fixing the . ...

javascriptcsshtml

Reveal the concealed button with a jQuery click event

I have a simple question that has been elusive to find an answer for on the internet. Can anyone please help? <input hidden="true" class="btnsubmit" id="myaddslide2" onClick="UPCURSLIDE()" type="button" value="UPDATE"> <script> function ...

javascriptjqueryhtmlcss

What could be causing my jQuery handler to not capture my form submission?

I am developing a Ruby web application and using JQuery and AJAX to send/receive data. However, I am facing an issue where pressing the enter key does not submit the form. What should I do to ensure that my form submits successfully? Within my Foundation ...

javascriptjqueryhtmlajaxforms

Analyzing JSON information and presenting findings within a table

Requesting user input to generate a JSON object based on their response. Interested in showcasing specific details from the object in a table format for user viewing. Questioning the efficiency and clarity of current approach. My current progress: In HTM ...

javascripthtmljson

A single snippet of JavaScript blocking the loading of another script

I've encountered an issue where the code seems to be conflicting with itself. The top part works fine, but the bottom part doesn't. However, when I remove the top portion, everything works as intended! You can see a working example of both compo ...

javascripthtml

Tips for concealing the top button on a mat calendar

I have a calendar for a month and year, but when I click on the top button it also displays the day. How can I hide that button or instruct the calendar not to show the days? Check out this image I was thinking of using a CSS class to hide that element. ...

cssangularangular-material

Issues with hiding divs using AngularJS and Bootstrap pagination

Currently, I am utilizing AngularJS and pagination to display multiple divs on my webpage. These divs are then hidden based on specific criteria that I have established. You can see an example of the code snippet below: <div class="Data ...

javascriptcssangularjs

Attempting to trigger CSS transitions using JavaScript will not be successful

I'm facing an issue where CSS transitions do not work as expected when triggered by JavaScript. let isSearchBarOpen = false; function toggleSearchBar() { if (isSearchBarOpen) { searchBar.style.display = "none"; } else { searchBar.sty ...

javascripthtmlcsscss-transitionsdom-manipulation

How can I ensure that Div and its contents are only responsive to changes in width?

Initially, I'm feeling a bit confused but I'll try my best to articulate my issue and what I need. Within a div element, there's another div that I want to move left and right only, following the same path as an image when resizing (refer t ...

htmlcss

Tips for altering the design of a registration page

I'm struggling to modify my registration page layout so that the avatar is positioned on the left while the username, password input boxes are on the right. I attempted to use split divs without success and also tried adjusting the positioning of the ...

htmlcssformsavatar

Adjust the properties within the component's styles using Angular 2

In this project, the objective is to dynamically change the background-color based on different routes. The goal is to display a specific color for UpcomingComponent while keeping the background-color consistent for all other routes. The approach involves ...

javascriptcssangular

Failed to add a new entry to the Sharepoint 2013 List

Having trouble saving an item to a SharePoint list using Knockout.js and REST. In my Ajax POST request, I've used ko.toJSON but the entry doesn't show up in the SharePoint list. It's possible that I'm passing the wrong parameter value. ...

jqueryhtmlajaxknockout.jssharepoint-2013

What is the best way to collapse a button in asp.net using javascript after setting it to hidden?

I have a scenario where I have 3 buttons in a row on my asp.net page. Using JavaScript, I am setting the middle button (ButtonSR) to invisible. However, I want the button below it to move up and take its place instead of leaving an empty space. ...

javascripthtmlasp.net

Merging ng-if conditions

I would like to find a way for my two ng-if conditions to work together instead of separately. I want to display only the last one if both are true. Currently, this is how my code looks: <div> <img ng-src="{{img(myColor)}}" ng-if="myColor" ...

htmlangularjsuser-interfaceng-showangular-ng-if

Using loops in Sass mixins causes errors

I have been developing a SASS code to generate CSS output that has the following format. background: -webkit-linear-gradient(top, 50%); background: -moz-linear-gradient(top, 50%); background: linear-gradient(top, 50%); This is the SASS mixin code I cr ...

csssasscompass-sassmixins

The nested table is overflowing beyond the boundaries of its outer parent table

I have created a nested table, shown below: <table border="0" width="750" cellspacing="0" cellpadding="0"> <tr align="center"> <td width="530"> <table border="0" cellspacing="0" cellpadding="0" width="530"> <tr&g ...

htmlcss

When nearing the edge of the window, extend the submenu in the opposite direction

I've created a simple submenu using CSS, structured as an unordered list. It appears on hover by changing the display property to "block". <ul> <li><a href="#">item</a></li> <li><a href="#">item</a ...

jquerycss

Arrange two span elements in opposite directions within an li element

When creating a list of 5 items with HTML using the li tag, each item has data formatted as a:b. <li class="subtitle"> <span>a </span>: <span>b</span></li> <li class="subtitle"> <span>c </span>: <sp ...

htmlcss