I have set up some icons on my website but there is one (the "zoom" icon) that is not aligned. It is on the top of the container. I had to use justify content with the space-evenly option to order all the images. I have tried everything but I can not figure out. It must be a silly question for the experts but this is my first website. I am attaching the images as evidence.
Thanks in advance
The CSS and HTML code
#import url(menu.css);
#import url(slider.css);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #9acd32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='0.17'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
header {
width: 100%;
height: 80px;
background: white;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.contenedor {
width: 95%;
margin: auto;
}
.brand {
width: 160px;
margin: 3px 10px;
}
section {
width: 100%;
margin-bottom: 25px;
}
/*QUIENES SOMOS*/
#quienes_somos {
margin-top: 100px;
text-align: center;
}
/*NUESTROS PROFESIONALES*/
#profesionales {
text-align: center;
margin-top: 100px;
}
#profesionales .contenedor {
display: block;
justify-content: center;
}
.doctor img {
width: 100%;
max-width: 500px;
padding: 10px;
}
/*CONSULTAS Y CITAS*/
#consultas {
margin-top: 100px;
text-align: center;
}
#consultas .images {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 10px;
border: 1px solid red;
}
/*FOOTER*/
footer .contenedor {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
font-size: small;
margin-bottom: 50px;
margin-top: 250px;
}
#media (min-width:1024px) {
.contenedor {
width: 1000px;
}
#profesionales .contenedor {
display: flex;
}
.doctor {
width: 50%;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>Balance-Salud Mental</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1, maximun-scale=1, minimun-scale=1"/>
<meta name="description" content="Tu salud mental es importante, cuidala con los profesiones adecuados. "/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap" rel="stylesheet"/>
</head>
<body>
<header>
<div class="contenedor">
<a href="index.html">
<img src="img/logo.png" class="brand" alt="Salud Mental Peru">
</a>
<input type="checkbox" id="menu-bar">
<label class="icon-menu-outline" for="menu-bar"></label>
<nav class="menu">
¿Quienes Somos?
Nuestros Profesionales
Consultas y Citas
Artículos
</nav>
</div>
</header>
<main>
<section id=consultas>
<h2>Consultas y Citas</h2> <br>
<div class="contenedor">
<p> Consultorio: Av. Arequipa 2555, Lince. Lima. <br>
Debido a la coyuntura actual, tambien estamos realizando las consultas a través de videollamadas en la
plataforma de tu preferencia.
</p>
<div class="images">
<img src="img/whatsapp-png.png" width="70px" height="70px"/>
<img src="img/skype-png.png" width="100px" height="70px"/>
<img src="img/messenger-png.png" width="70" height="70px"/>
<img src="img/meet-png.png" width="70" height="70px"/>
<img src="img/zoom-png.png" width="120" height="40px"/>
</div>
<p>
Comunícate (whatsapp) y agenda tu cita:
</p>
<p>
Psiquiatría: (+51)999888777 <br>
Psicología: (+51)999888777
</p>
</div>
</section>
</main>
<footer>
<div class="contenedor">
<p>2018-2020 Balance Salud Mental © - Designed by Watermelon</p>
</div>
</footer>
</body>
</html>
I also cannot see the images, but I think I have a pretty good guess about what's happening there. Try adding align-items: center to your #consultas .images ruleset and that should fix it.
The reason why they do not look aligned vertically is that you set a different height for your zoom image from your other images. justify-content only aligns them horizontally, to align the items vertically within a flex container, you can use align-items.
Maybe It's gotta do something with the height of the image. Try increasing the height of the zoom image to maintain with others.
Try this line with height of 70px
<img src="img/zoom-png.png" width="120" height="70" />
Related
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
I am having a bit problem aligning the content in the container to match all the other items in the container, and what else should I do to optimise my css code , I am a beginner to CSS and I was just practicing this project from frontendmentor , I'll be grateful if you could help me with this
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="styles.css" />
<title>Frontend Mentor | Profile card component</title>
</head>
<body>
<div class="container">
<div class="top-content"><img src="images/bg-pattern-card.svg" /></div>
<div class="middle-content">
<img src="images/image-victor.jpg" alt="" />
<h3 class="name">
Victor Crest<span> </span><span class="age">26</span>
</h3>
<p class="location">London</p>
</div>
<hr />
<div class="bottom-content">
<ul class="numbers">
<li>80K</li>
<li>803K</li>
<li>1.4K</li>
</ul>
<ul class="description-numbers">
<li>Followers</li>
<li>Likes</li>
<li>Photos</li>
</ul>
</div>
</div>
</body>
</html>
CSS
#import url(https://fonts.google.com/specimen/Kumbh+Sans);
:root{
--Dark-cyan: hsl(185, 75%, 39%);
--Very-dark-desaturated-blue: hsl(229, 23%, 23%);
--Dark-grayish-blue: hsl(227, 10%, 46%);
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background:url(images/bg-pattern-top.svg),url(images/bg-pattern-bottom.svg) ;
background-color: var(--Dark-cyan);
background-repeat: no-repeat;
background-position: -90% -500px,175% 400px;
font-family: "Kumbh Sans",sans-serif;
color:var(--Dark-grayish-blue);
font-size:18px;
}
.container{
background-color: #fff;
height:45%;
width:30%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin:10rem auto;
border-radius: 12px;
position: relative;
}
.top-content,.bottom-content{
width: 100%;
}
.top-content{
width: 100%;
height:33%;
}
.top-content img{
width: 100%;
}
.middle-content img{
border-radius: 50%;
border:6px solid #fff;
position: absolute;
top:30%;
left:37%;
}
h3{
margin-top:70%;
color:#000;
}
.age{
color:var(--Dark-grayish-blue);
padding-left: 0.5em;
}
p.location{
position:relative;
left:35px;
padding:1.25rem 0;
}
ul{
display: flex;
justify-content: space-around;
padding-top:1rem;
}
ul.numbers li{
font-weight:700;
color: #000;
}
ul.description-numbers li{
padding-bottom:1rem;
font-size: 15px;
letter-spacing: 0.1em;
}
ul li{
list-style: none;
}
hr{
height:1px;
opacity: 0.5;
width: 100%;
background-color: var(--Dark-grayish-blue);
}
TRY THIS OUT AND LET ME KNOW
Add a center class to your top container.
<div class="container center">
Add this CSS code to your stylesheet
.center {
margin: auto;
width: 50%;
}
I would change the html a little bit for that.
<ul class="bottom-content">
<li>
<span>80K</span>
<span>Followers</span>
</li>
<li>
<span>803K</span>
<span>Likes</span>
</li>
<li>
<span>1.4K</span>>
<span>Photos</span>
</li>
</ul>
And the css
.bottom-content {
display: flex;
justify-content: space-around;
}
.bottom-content > li {
display: flex;
flex-direction: column;
align-items: center;
}
I want to align the logo on the left side and the nav links on the right side horizontally.
Mainly, I used display: flex on .nav-wrapper and used align-items: center. However, there still seems to be a bit of misalignment between the logo and the nav link elements which I cannot seem to figure out how to properly correct. Would really appreciate some help on this!
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI";
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding-left: 30px;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid blue;
}
.right-menu {
display: flex;
padding-right: 12px;
}
.right-menu .right-menu-items {
display: flex;
}
.right-menu .right-menu-items li a {
padding: 0 12px;
}
.logo {
width: 80px;
height: 80px;
}
.main-wrapper {
background-image: url("/assets/lucrezia-carnelos-gvc7MK4gnDk-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
top: 0;
z-index: -1;
}
.main-wrapper .welcome-note {
position: relative;
top: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>italki: Learn a language online</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="nav-wrapper">
<a href="#">
<img src="./assets/white_logo.svg" alt="italki logo" class="logo" />
</a>
<nav class="right-menu">
<ul class="right-menu-items">
<li>Log in</li>
<li>Sign up</li>
<li>Become a Teacher</li>
</ul>
</nav>
</header>
<div class="main-wrapper">
<div class="welcome-note">
<h1>Become fluent in <br />any language</h1>
<p
>Choose from over 10,000 teachers for 1-on-1 lessons based on your
goals and interests</p
>
<input type="text" placeholder="Choose a language" />
</div>
</div>
</body>
</html>
I've created demo, Here Link: https://jsfiddle.net/590nartL/
Infact it really horizontally center, red border prove that.
Of couse, maybe you think font in red border box not vertical middle, you can add style as below:
.right-menu {
margin-top: -2px;
}
Any negative margin value as you want.
It happens because there is an unnecessary space between the <img> tag and the parent <a> tag.
The <img> is an inline element so this happened.
To remove the space, make <img> tag as block element as follows or implement vertical-align.
.logo {
display: block;
width: 80px;
height: 80px;
}
or make parent <a> as flex style
a {
display: flex;
flex-direction: column;
}
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to create a nav bar and i don't know why i am facing this problem :
Trying to set the li within the ul as inline-block works, but it is moving the whole list below the image i am using as a logo.
Can someone explain why is this happening and how to fix it?
https://codepen.io/rou-teodor/pen/QWNrVNZ
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
}
img {
display: inline-block;
width: 100%;
height: auto;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.logo {
width: 150px;
position: center;
display: inline-block;
}
#nav-bar {
background-color: yellow;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
}
#nav-bar li {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="header">
<nav id="nav-bar">
<img src="https://lh3.googleusercontent.com/proxy/Gyq8iOFxCVu1elwlR_1-GxK3u-TUWFFlOQSqrfDZgAHetn8z2IwFTVlfxbFKi22xFMo50VuCSigKfek8gVmIspvxC-TIr0Ve0a5eke9v72M3k9xkxmhrsdxYpiqgnFm6Sg" alt="" class="logo" />
<ul>
<li class="nav-link">acasa</li>
<li class="nav-link">despre</li>
<li class="nav-link">produse</li>
<li class="nav-link">cumpara</li>
</ul>
</nav>
<img src="cover.jpeg" alt="" id="header-img" />
<p></p>
</header>
<section class="products">
<div class="product1"></div>
<div class="product2"></div>
<div class="product3"></div>
</section>
<div class="form">
<!-- Formular cumparare -->
</div>
</body>
</html>
The navbar isn't below the logo, it's just on the same line. The reason for the way it looks is that the logo image is quite high (select it in the browser tools to see that)
To have the navbar vertically centered to the logo, you can add display: flex; and align-items: center; to the CSS rule for #nav-bar
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
}
img {
display: inline-block;
width: 100%;
height: auto;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.logo {
width: 150px;
position: center;
display: inline-block;
}
#nav-bar {
background-color: yellow;
display: flex;
align-items: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
}
#nav-bar li {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="header">
<nav id="nav-bar">
<img src="https://lh3.googleusercontent.com/proxy/Gyq8iOFxCVu1elwlR_1-GxK3u-TUWFFlOQSqrfDZgAHetn8z2IwFTVlfxbFKi22xFMo50VuCSigKfek8gVmIspvxC-TIr0Ve0a5eke9v72M3k9xkxmhrsdxYpiqgnFm6Sg" alt="" class="logo" />
<ul>
<li class="nav-link">acasa</li>
<li class="nav-link">despre</li>
<li class="nav-link">produse</li>
<li class="nav-link">cumpara</li>
</ul>
</nav>
<img src="cover.jpeg" alt="" id="header-img" />
<p></p>
</header>
<section class="products">
<div class="product1"></div>
<div class="product2"></div>
<div class="product3"></div>
</section>
<div class="form">
<!-- Formular cumparare -->
</div>
</body>
</html>
Add display: flex;align-items: center; to align vertically center the navbar :)
#nav-bar {
background-color: yellow;
display: flex;
align-items: center;
}
I have a fixed header that I've set up with a higher z-index than the body content so the content slips underneath it. In order to position the content div right below the fixed header, I set its position:relative and gave it a top value
This seemed to work fine, until I started to add items to the content div. First I added an h1 and as I attempted to give it a little margin-top the entire page (header and all) shifted down the value I specified for my margin-top.
I've run into this before (collapsing divs yes?) and I've usually been able to fix it with a set width or a float or a display block, but none of these seem to be doing the trick.
Can someone tell me what I am missing?
*
{
padding: 0;
margin: 0;
}
header
{
background-color: white;
color: #724444;
width: 100%;
height: 90px;
border-bottom: 1px solid rgba(140, 140, 140, .2);
position: fixed;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 1.3;
z-index: 1000;
}
#header-fixedWidth
{
width: 1000px;
height: 90px;
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
nav ul
{
list-style: none;
display: flex;
}
nav ul li
{
margin: 0 10px;
}
#main-content
{
width: 100%;
min-height: 100px;
position: relative;
top: 89px;
}
#main-content-fixedWidth
{
width: 1000px;
min-height: 100px;
margin: 0 auto;
position: relative;
}
.headers
{
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 1.3;
margin-top: 20px;
}
#image-deck
{
width: 1000px;
border: 1px solid #ccc;
position: relative;
display: block;
}
/*Media Queries*/
#media (max-width: 1000px)
{
header
{
width: 100%;
}
#header-fixedWidth
{
width: 100%;
}
}
<html>
<head>
<title>Pic Monkey Recreation</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth"
<img src="Images/logo.png" alt="randomLogo" id="randomLogo" />
<nav>
<ul>
<li>
<img src="Images/iconMenu/edit.png" alt="">
<br>
<p>Edit</p>
</li>
<li>
<img src="Images/iconMenu/touchUps.png" alt="">
<br>
<p>Touch Up</p>
</li>
<li>
<img src="Images/iconMenu/design.png" alt="">
<br>
<p>Design</p>
</li>
<li>
<img src="Images/iconMenu/collage.png" alt="">
<br>
<p>Collage</p>
</li>
</ul>
</nav>
<div id="user-help">
<img src="Images/signIn.png" alt="signIn" id="signIn" />
</div>
</div>
</header>
<div id="main-content">
<div id="main-content-fixedWidth">
<div id="test">
<p class="headers">Here is a header for you to look at</p>
</div>
<div id="image-deck"></div>
</div>
</div>
</body>
</html>
You will need a counter minus margin to offset the amount you have moved it. So if your box has a top value 50px and your inner h1 have a margin-top value 100px you'd need to reset your box top value to -50px to counter.