Help with dimensions

HTML-CSS
1

Im making a site with multiple pages, my wrapper is at width of 1200px but body has margin’s of 360px from left and 360px from right. Now on my About page, my main is wider than rest of parts with width of 1220px for some reason even though i used 1200px width and 10px padding. Any help would be appreciated:

Screenshot_2
Screenshot_21503×1008 115 KB

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="CSS/style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,700i&amp;subset=latin-ext" rel="stylesheet">
</head>
<body>
	
	<div id="wrapper">
		
		<header id="header">
			
			<div id="logo"><a href="index.html"><img src="Images/logo.svg" alt="logo"></a></div>
			
			
				
				<ul id="contact-list">
					<li><a href="#"><i class="fas fa-envelope icon"></i></a></li>
					<li id="space"><p>Contact us</p>
						<p>Send us email</p>
					</li>
					<li><a href="#"><i class="fas fa-phone icon"></i></a></li>
					<li><p>Call us:</p>
						<p>443 445 545</p>
					</li>
				</ul>
				
			
		</header>
		
		<nav id="nav">
			<ul>
				<li><a href="index.html">HOME</a></li>
				<li><a href="about.html">ABOUT</a></li>
				<li><a href="work.html">WORK</a>
					<ul>
						<li><a href="#">WORK 1</a></li>
						<li><a href="#">WORK 2</a></li>
						<li><a href="#">WORK 3</a></li>
					</ul>
				</li>
				<li><a href="services.html">SERVICES</a>
					<ul>
						<li><a href="#">SERVICES 1</a></li>
						<li><a href="#">SERVICES 2</a></li>
						<li><a href="#">SERVICES 3</a></li>
					</ul>
				</li>
			</ul>
		</nav>
		
		<main id="main-about">
			<h2>Lorem ipsum dolor sit amet</h2>
			<img src="Images/meeting.jpg" alt="meeting">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ipsam sapiente debitis at, repellendus impedit! Amet, deleniti nihil sequi consequuntur dolores debitis labore esse necessitatibus, eos velit, ipsam est quasi repellendus maiores vitae eaque itaque! Minus repellendus aperiam veniam recusandae.</p>
			<img src="Images/office.jpg" alt="offie">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni porro est voluptas pariatur, magnam, recusandae et quam iusto consectetur, ipsum beatae. Labore dicta ex repellendus hic totam obcaecati nisi quisquam, aut sunt quia, a repellat? Maxime, debitis, quisquam. Vitae, quae.</p>
		</main>
		
		
		
		<footer id="footer">
			<p>&copy; 2019 Web Design</p>
		</footer>
		
	</div>
</body>
</html>

/* CSS Document */

body {
	margin: 0 360px 0 360px;
	padding: 0;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
}

#wrapper {
	width: 1200px;
}
header {
	padding: 10px;
	overflow: hidden;
}

header #logo {
	width: 60px;
	margin-left: 20px;
	float: left;
}



#contact-list {
	list-style-type: none;
	float: right;
	margin-right: 20px;
}

#contact-list > li {
	float: left;
}

#contact-list > li > p {
	margin: 0;
}


#contact-list > li > a > .icon {
	margin-right: 20px;
	font-size: 40px;
	color: rgba(58,183,177,1.00);
}

#contact-list > #space {
	margin-right: 20px;
}
nav {
	height: 37px;
	background: rgba(3,71,104,1.00);
}

nav > ul {
	list-style-type: none;
	margin: 0;
	float: left;
	padding: 0;
	margin-left: 361.37px;
}

nav > ul > li {
	float: left;
	position: relative;
}

nav > ul > li > a {
	padding: 10px 35px;
	text-decoration: none;
	display: block;
	background: rgba(58,183,177,1.00);
	color: white;
}

nav > ul > li > a:hover{
	background: rgba(97,201,200,1.00);
}

nav > ul > li > ul {
	list-style-type: none;
	position: absolute;
	margin: 0;
	padding: 0;
	display: none;
}

nav > ul > li:hover ul {
	display: block;
}

nav > ul > li > ul > li {
	padding: 0;
	margin: 0;
}

nav > ul > li > ul > li > a {
	padding: 10px 35px;
	text-decoration: none;
	background: rgba(58,183,177,1.00);
	display: block;
	color: white;
}

nav > ul > li > ul > li > a:hover {
	background: rgba(97,201,200,1.00);
}

main, aside {
	font-size: 16px;
}
main {
	width: 710px;
	float: left;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}


figure {
	margin: 0;
}

figcaption {
	font-size: 13px;
}

aside {
	margin-top: 10px;
	width: 450px;
	float: right;
	padding: 10px 0 10px 10px;
	margin-bottom: 10px;
}

aside > p {
	margin-top: 30px;
}

aside > ul {
	list-style-type: none;
}

aside > ul > li {
	margin-bottom: 10px;
}

aside > .aside-content > h2 {
	margin-top: 0;
}

aside > .aside-content {
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 20px;
	background: rgba(182,229,233,1.00);
	box-shadow: 0 4px 4px -2px #232323;
}
footer {
	background: rgba(83,177,216,1.00);
	padding: 20px;
	clear: both;
	text-align: center;
	color: white;
}

main#main-about {
	background: rgba(112,59,60,1.00);
	width: 1200px;
	padding: 10px;
}

HTML from main page (Index /home)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="CSS/style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,700i&amp;subset=latin-ext" rel="stylesheet">
</head>
<body>
	
	<div id="wrapper">
		
		<header id="header">
			
			<div id="logo"><a href="index.html"><img src="Images/logo.svg" alt="logo"></a></div>
			
			
				
				<ul id="contact-list">
					<li><a href="#"><i class="fas fa-envelope icon"></i></a></li>
					<li id="space"><p>Contact us</p>
						<p>Send us email</p>
					</li>
					<li><a href="#"><i class="fas fa-phone icon"></i></a></li>
					<li><p>Call us:</p>
						<p>443 445 545</p>
					</li>
				</ul>
				
			
		</header>
		
		<nav id="nav">
			<ul>
				<li><a href="index.html">HOME</a></li>
				<li><a href="about.html">ABOUT</a></li>
				<li><a href="work.html">WORK</a>
					<ul>
						<li><a href="#">WORK 1</a></li>
						<li><a href="#">WORK 2</a></li>
						<li><a href="#">WORK 3</a></li>
					</ul>
				</li>
				<li><a href="services.html">SERVICES</a>
					<ul>
						<li><a href="#">SERVICES 1</a></li>
						<li><a href="#">SERVICES 2</a></li>
						<li><a href="#">SERVICES 3</a></li>
					</ul>
				</li>
			</ul>
		</nav>
		
		<main id="main">
			<h1>Lorem ipsum</h1>
			<figure>
				<img src="Images/laptop.jpg" alt="laptop">
				<figcaption>Lorem ipsum dolor sit amet.</figcaption>
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam sed, facere, eligendi, perferendis asperiores itaque reprehenderit similique animi perspiciatis aliquam id. Aperiam neque ad nisi iste recusandae quibusdam hic aliquid aspernatur quae vel pariatur, ex. Ut a, tenetur, asperiores, optio voluptates consequuntur non officia fuga iure quas, sit aut numquam.</p>
			<h2>Lorem ipsum</h2>
			<figure>
				<img src="Images/mac.jpg" alt="mac">
				<figcaption>Lorem ipsum dolor sit amet.</figcaption>
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam sed, facere, eligendi, perferendis asperiores itaque reprehenderit similique animi perspiciatis aliquam id. Aperiam neque ad nisi iste recusandae quibusdam hic aliquid aspernatur quae vel pariatur, ex. Ut a, tenetur, asperiores, optio voluptates consequuntur non officia fuga iure quas, sit aut numquam.</p>
			<h2>Lorem ipsum</h2>
			<figure>
				<img src="Images/mac2.jpg" alt="mac">
				<figcaption>Lorem ipsum dolor sit amet.</figcaption>
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam sed, facere, eligendi, perferendis asperiores itaque reprehenderit similique animi perspiciatis aliquam id. Aperiam neque ad nisi iste recusandae quibusdam hic aliquid aspernatur quae vel pariatur, ex. Ut a, tenetur, asperiores, optio voluptates consequuntur non officia fuga iure quas, sit aut numquam.</p>
		</main>
		
		<aside id="aside">
			<div class="aside-content">
				<h2>Lorem ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, a natus nam consequuntur at dolore assumenda sit, vitae quam qui doloremque veritatis corporis libero fugiat? Vel quaerat fugiat mollitia voluptatibus.</p>
			</div>
			
			<div class="aside-content">
				<h2>Lorem ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, a natus nam consequuntur at dolore assumenda sit, vitae quam qui doloremque veritatis corporis libero fugiat? Vel quaerat fugiat mollitia voluptatibus.</p>
			</div>
			
			<div class="aside-content">
				<h2>Lorem ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, a natus nam consequuntur at dolore assumenda sit, vitae quam qui doloremque veritatis corporis libero fugiat? Vel quaerat fugiat mollitia voluptatibus.</p>
			</div>
			
			<div class="aside-content">
				<h2>Lorem ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, a natus nam consequuntur at dolore assumenda sit, vitae quam qui doloremque veritatis corporis libero fugiat? Vel quaerat fugiat mollitia voluptatibus.</p>
			</div>
			
			<div class="aside-content">
				<h2>Lorem ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, a natus nam consequuntur at dolore assumenda sit, vitae quam qui doloremque veritatis corporis libero fugiat? Vel quaerat fugiat mollitia voluptatibus.</p>
			</div>
			
			
			<ul>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
			</ul>
		</aside>
		
		<footer id="footer">
			<p>&copy; 2019 Web Design</p>
		</footer>
		
	</div>
</body>
</html>
2

Use box-sizing: border-box;

Add at the top of the CSS

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}


1 Like
3

What does the star stand for?

4

star means “select all elements”

1 Like
5

To add to that. It is called the universal selector, you read more here.

1 Like
6

Great work on the site. Set your body’s margin and padding to 0. For your navigation set max-width to your desired value but please use max-width. If you can drop a link to maybe codepen, I could help out more.

1 Like
7

Ok thank you for your help i really appreciate it. Sorry for late reply i was busy.

8

Thanks :smiley: i already figured out the problem, actually it wasnt a problem i was just confused for a bit but now i have it sorted out.