Move image up towards the header in the sidebar - html

Question

I would like to move the circular image of myself located in the sidebar up and in line with my name displayed in the header. The contact and tech skills sections might need adjusting as well.
I have learned about absolute versus relative and how it relates to this, but I just can't implement a working solution.
This is what I have been working with:
<div style="position:relative; height:60px;">
<img src="profile_pic_circular.png"
style="position:absolute; top:-10px; left:-30px; width:80px; height:80px; border:none;"
alt="profile"
title="profile photo" />
</div>
Link to my resume with picture.
Code:
#import url("https://fonts.googleapis.com/css?family=Montserrat|Playfair+Display&display=swap");
/* Main text is monserrat*/
body {
font-family: "Montserrat", sans-serif;
font-weight: 300;
line-height: 1.3;
color: #444;
}
/* Give headers playfair font */
h1,
h2,
h3 {
font-family: "Playfair Display", serif;
color: #000;
}
/* When in PDF export mode make sure superscripts are nice and small and italic */
sup {
font-size: 0.45rem;
font-style: italic;
}
/* Avoid the breaking within a section */
.blocks {
break-inside: avoid;
}
* {
/* Override default right margin for sidebar*/
--pagedjs-margin-right: 0.2in;
--pagedjs-margin-left: 0.2in;
}
/* Customize some of the sizing variables */
:root {
--sidebar-width: 12rem; /* Shrink sidebar width */
--sidebar-background-color: #f7fbff; /* Make sidebar blue */
--sidebar-horizontal-padding: 0.01in; /* Reduce sidebar padding */
--decorator-outer-dim: 10px; /* Make position deliniating circles larger */
--decorator-border: 2px solid #bdd7e7; /* Make timeline a blue as well*/
}
.details .place {
margin-top: 0.25rem;
}
.main-block:not(.concise) .details div {
padding-top: 0.009rem;
}
/* Laptop icon isn't centered by default which is lame */
.fa-laptop {
margin-left: -3px;
}
/* When we have links at bottom in a list make sure they actually are numbered */
#links li {
list-style-type: decimal;
}
/* Dont put the little fake list point in front of links */
.aside li::before {
display: none;
}
/* Move closer to start and up towards header */
.aside ul {
padding-left: 1rem;
}
.aside li::before {
position: relative;
margin-left: -4.25pt;
content: "• ";
}
/* Make sure elements in asside are centered and have a nice small text */
.aside {
width: calc(var(--sidebar-width) + 9px);
line-height: 1.2;
font-size: 0.75rem;
}
/* Make little circle outline be a light blue */
.decorator::after {
background-color: #08306b;
}
/* Remove the fake bullets from lists */
.aside li::before {
content: auto;
}
.skill-bar {
color: white;
padding: 0.1rem 0.25rem;
margin-top: 3px;
position: relative;
width: 100%;
}
/* When the class no-timeline is added we remove the after psuedo element from the header... */
/* Removes the psuedo element on h2 tags for this section */
.section.no-timeline h2::after {
content: none;
}
/* Without adding padding the content is all up on the title */
.section.no-timeline h2 {
padding-bottom: 1rem;
}
/* Add styles for little cards */
.info-card{
width: 220px;
float: left;
padding: 0.5rem;
margin: 0.5rem;
box-shadow: 1px 1px 4px black;
}

Answer 1

I inspected the sidebar (right-click, choose Inspect) and saw that .aside had a padding. Remove it to align your picture with your headline.
padding: 0.6in var(--sidebar-horizontal-padding)