/*
Project Name: Monthly Resolutions
Client: One Month
Author: Christopher Castig | @castig
*/
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
font-family: 'Lato', sans-serif;
}
html {
margin: 0px 0px 0px 0px;
}
.clear {
clear: both;
}
h1 {
padding: 0px 0px 0px 0px;
font-size: 60px;
margin-bottom: 0%;
letter-spacing: -4px;
margin-left: 100px;
line-height: 1;
margin-top: 100px;
}
h6 {
font-size: 17.5px;
margin-top: 0%;
margin-left: 100px;
}
body {
background: url(/Users/harshfernandes/Desktop/Coding/fourth-code-resources/images/notebook.png); /* add a fallback color of #d6d6d6 */
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 100%;
width: 1200px;
}
#rheading {
font-size: 40px;
margin-top: 30px ;
margin-bottom: 2px;
}
#container {
width: 1200px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#caption {
color: rgb(88, 88, 88);
font-size: 15px;
margin-bottom: 70px;
}
#content {
background: white;
float: left;
width: 680px;
padding-left: 30px;
padding-right: 30px;
margin-left: 100px;
}
#sidebar {
float: left;
background: white;
width: 310px;
border: 3px;
border-style: solid;
border-top: none;
border-right: none;
border-color:rgb(192, 192, 192);
margin-left: 10px;
padding: 15px 15px 15px 15px;
margin-right: 100px;
}
#footer {
margin-top: 30px;
margin-bottom: 20px;
margin-left: 100px;
}
a {
color: orange;
text-decoration: none;
}
.image {
border-radius: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
blockquote {
font-style: italic;
border-left: 4px solid gray;
padding-left: 20px;
margin-left: 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Chris Castiglione, and the One Month team">
<title>Monthly Resolutions by Harsh Fernandes</title>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fourth-code-resources/css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Monthly Resolutions</h1>
<h6>Dreaming Aloud. 30 days at a time.</h6>
</div>
<!--header-->
<div id="content">
<p id="rheading"> Learn to Surf </p>
<img src="fourth-code-resources/images/surfing.jpg" alt="surf image" width="620px">
<p> This april I will travel to the Carribean and take surfing lessons.</p>
<hr>
<p id="caption">My April Resolution by Harsh Fernandes</p>
<p id="rheading">Read Everyday</p>
<img src="fourth-code-resources/images/book.jpg" alt="book" width="620px">
<p>This Month I will read at least 50 pages everyday, including weekends.</p>
<hr>
<p id="caption">My March Resolution by Harsh Fernandes</p>
<p id="rheading">Meditate</p>
<img src="fourth-code-resources/images/meditate-girl.jpg" alt="Meditate" width="620px">
<p>I will take a meditation class and practice meditating at least 20 minutes everyday for the month. Hopefully I won't fall asleep every time I meditate.</p>
<hr>
<p id="caption">My February Resolution by Harsh Fernandes</p>
</div>
<!--content-->
<div id="sidebar">
<img src="fourth-code-resources/images/chris-castiglione.jpg" alt="Chris">
<p>This blog was made by Harsh Fernades (I don't look like that)</p>
<h3>Follow Me</h3>
<ul>
<li><a href="https://www.twitter.com" target="blank">Twitter</a></li>
<li><a href="https://www.instagram.com" target="blank">Instagram</a></li>
<li><a href="https://www.facebook.com" target="blank">Facebook</a></li>
</ul>
<h3>Quote of the Day</h3>
<blockquote>
<p>"We are what we repeatedly do. Excellence, then, is not an act, but a habit."</p>- Aristotle</blockquote>
</div>
<!--sidebar-->
<div ></div>
<div id="footer">
Made with the help of <a href="https://onemonth.com/" target="blank">One Month HTML</a> by Chris Castglione
</div>
<!--footer-->
</div>
<!--container-->
</body>
</html>strong text I am learning to code through this website and for my first proper project, we had to build a static website which has to look as similar to the screenshot. I got everything right except for the margin on the right. I even tried using inspect element and it appears to be coming from my body but even after setting my body's margin to 0, nothing changed. Since this is for beginners, it shouldnt be that difficult but I am REALLY struggling with this for hours. Please help me. This is what it is supposed to look like
This is what it looks like at 100% zoom
CodePudding user response：
It does look pretty close but here are the main issues:
Margin: 0 is All around the body element and the .container class, and in terms of default that means everything is pushed to the left, there is not default centering.
With a static 100px margin and a float: left on your #content it does give a close approximation of what the image is, but again this is based on your screen size. If your screen were widened it would look incorrect from left to right.
SOLUTION: The simplest solution for things like content and containers, or simply body elements, is { margin-left: auto; margin-right: auto; } As you did with the images.
If you want to do it in shorthand you can declare multiple margin attributes in one line, such as Top & bottom being 0 margin and left and right being auto would be { margin: 0 auto;} Source for shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/margin
CodePudding user response：
This will help you, change your style (body & #container) like this :
body {
background: url(/Users/harshfernandes/Desktop/Coding/fourth-code-resources/images/notebook.png); /* add a fallback color of #d6d6d6 */
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 100%;
width: 100%;
overflow-x: hidden;
}
#container {
display: table;
margin: 0 auto;
}