just spend few hours trying to figure out my problem and I'm really stuck. This is my first HTML page and I'm a total noob. Doing an online video HTML course.
The aside part which is the black part on the left does not stick entirely to the left and there's some white gap. I want to move it totally to the left.
Compare the following:
My page: https://velvety-kataifi-c1a647.netlify.app/
vs
How it supposed to look like: https://superlative-narwhal-c0f1e9.netlify.app/.
Tried playing with margins, position absolute/fixed/relative etc. but cannot get the effect as in the https://superlative-narwhal-c0f1e9.netlify.app/.
I'd be thankful for any support.
This is the HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CV Alexander Marabou</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div >
<main>
<div >
<h2><span >Front-End Developer</span></h2>
<h1><span >John Doe</span></h1>
<p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis
ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas
accumsan lacus vel facilisis.
</p>
</div>
<div >
<h2 >Projects</h2>
<ol >
<li>
<a href="https://barbershop-pl.goit.global"
>https://barbershop-pl.goit.global/</a
>..............<span >[</span> HTML5,
CSS3 <span >]</span>
</li>
<li>
<a href="https://cryptohub.goit.global"
>https://cryptohub.goit.global/</a
><span >......................</span
><span > [</span> JavaScript
<span >]</span>
</li>
<li>
<a href="https://kidslike.goit.global"
>https://kidslike.goit.global/</a
>..............................<span
>[</span
>
React.js, Node.js <span >]</span>
</li>
</ol>
</div>
<div >
<h2 >Work Experience</h2>
<h3 >
Front-End Developer <span >Freelance</span>
</h3>
<p >September 2019 - up to now | Country</p>
<ul >
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Risus commodo viverra maecenas.</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod.
</li>
</ul>
</div>
<div >
<h3>Manager <span >Glory New</span></h3>
<p >March 2015 - October 2018 | Country</p>
<ul >
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Risus commodo viverra maecenas.</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod.
</li>
</ul>
</div>
<div >
<h3>Manager <span >Glory LLC</span></h3>
<p >June 2014 - February 2015 | Country</p>
<ul >
<li>
<span
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span
>
</li>
<li>
<span
>Risus commodo viverra maecenas.</span
>
</li>
<li>
<span >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod.</span
>
</li>
</ul>
</div>
<div >
<h2>Education</h2>
<h3 >National University</h3>
<h4 >Management</h4>
<p >September 2009 - June 2014 | Country</p>
</div>
</main>
<aside>
<img
src="photo.jpg"
width="370"
alt="Zdjęcie Johna Doe"
/>
<div >
<h2 >Contact</h2>
<p >
<span >C:</span>
<a href="tel: 7 777 777 77 77"
> 7 777 777 77 77</a
>
<br />
<span >E:</span>
<a href="mailto:[email protected]"
>[email protected]</a
>
</p>
</div>
<div >
<h2 >Tech Skills</h2>
<ul >
<li><span >HTML5</span></li>
<li><span >CSS3</span></li>
<li><span >GIT</span></li>
<li><span >WebPack</span></li>
<li><span >JavaScript</span></li>
<li><span >React.js</span></li>
<li><span >Node.js</span></li>
</ul>
</div>
<div >
<h2 >Soft Skills</h2>
<ul >
<li><span >Scrum</span></li>
<li><span >Agile</span></li>
<li><span >GTD</span></li>
<li><span >Teamwork</span></li>
</ul>
</div>
</aside>
</div>
</body>
</html>
This is my CSS:
body {
font-family: "Montserrat", sans-serif;
background: #f5f7fa;
}
.wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: center;
width: 1200px;
margin: 0 auto;
background: #ffffff;
box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.1);
}
aside {
width: 370px;
background: #1e2939;
}
.cv-photo {
margin-top: 40px;
}
.header-secondary {
color: #ffffff;
}
.contact-links {
color: #ffffff;
font-size: 14px;
line-height: 24px;
}
.bold {
font-weight: 700;
}
.list-secondary {
color: #fb6d3a;
font-size: 14px;
line-height: 24px;
margin-left: 0px;
padding-left: 0px;
list-style-position: inside;
}
.list-secondary-item {
color: #ffffff;
}
.contact-block {
margin-top: 51px;
margin-left: 40px;
}
.tech-skills-block {
margin-top: 47px;
margin-left: 40px;
}
.soft-skills-block {
margin-top: 47px;
margin-left: 40px;
}
.main-content {
margin-top: 85px;
margin-left: 88px;
width: 400px;
height: 247px;
left: 498px;
top: 125px;
}
.main-content-projects {
margin-top: 40px;
margin-left: 88px;
margin-bottom: 51px;
}
.main-content-experience {
margin-top: 51px;
margin-left: 88px;
}
.main-content-glory-new {
margin-top: 16px;
margin-left: 88px;
}
.main-content-glory-llc {
margin-top: 20px;
margin-left: 88px;
}
.main-content-education {
margin-top: 43px;
margin-left: 88px;
margin-bottom: 107px;
}
.year-experience {
color: #a8a8a8;
font-size: 12px;
font-weight: 400;
line-height: 15px;
margin-top: 11px;
margin-bottom: 8px;
}
.university-color {
color: #fb6d3a;
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.management-font {
font-weight: 700;
font-size: 14px;
line-height: 17px;
margin-bottom: 12px;
margin-top: 11px;
}
.list-primary {
color: #595959;
font-weight: 400;
font-size: 14px;
line-height: 24px;
margin-left: 0px;
padding-left: 0px;
list-style-position: inside;
width: 509px;
}
.list-primary-item {
color: #595959;
font-weight: 400;
font-size: 14px;
line-height: 24px;
}
.header-primary {
font-weight: 700;
font-size: 22px;
line-height: 27px;
margin-bottom: 12px;
}
.job-name {
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.orange-company {
color: #fb6d3a;
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.main-name {
font-weight: 700;
font-size: 45px;
line-height: 55px;
}
.job-title-main {
font-weight: 700;
font-size: 14px;
line-height: 17px;
}
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
margin-left: 0px;
padding-left: 0px;
list-style-position: inside;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2.7em;
list-style-type: none;
counter-increment: item;
list-style-position: inside;
}
ol > li:before {
display: inline-block;
width: 1.5em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
font-weight: 700;
font-size: 14px;
line-height: 24px;
}
.bold-brackets-main {
font-weight: 700;
font-size: 14px;
line-height: 24px;
color: #000000;
}
.dots-lines-main {
color: #a8a8a8;
}
CodePudding user response：
It depends, what exactly you want. But here are the steps to move the aside element completely to the left:
1.) You applied a fixed width (1200px) to .wrapper which prevents the left-alignment of aside in larger windows. Remove that.
2.) Add flex-grow: 1; to main to allow it to fill the whole rest of the page (i.e. everything except aside).
3.) Add margin: 0 to bodyto remove the default margin.
CodePudding user response：
Change the alignment of the items in the div with class wrapper by adding the CSS:
justify-content: left;