Html/Css. making portfolio website header wont go to top of page on second page

pinsk
March 19, 2023
120 views
0 votes
2 Answers

I cannot get the main page’s navigation bar to the top of the second page. Margin and padding set to 0 did not work. I tried setting header position to absolute.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

nav {
  width: 100%;
  height: 75px;
  line-height: 75px;
  padding: 0px 100px;
  position: fixed;
  background-image: linear-gradient(#0094ff, #00ffff);
}

nav .logo p {
  font-size: 30px;
  font-weight: bold;
  float: left;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
}

nav ul {
  float: right;
}

nav li {
  display: inline-block;
  list-style: none;
}

nav li a {
  font-size: 18px;
  text-transform: uppercase;
  padding: 0px 30px;
  color: #fff;
  text-decoration: none;
}

nav li a:hover {
  color: #0026ff;
  transition: all 0.4s ease 0s;
}

body {
  background: #2397b1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  min-height: 1000px;
  margin: 50px;
  background: #ffffff;
  display: grid;
  grid-template-columns: 1fr 3fr;
  box-shadow: 0 35px 55px rgba(0, 0, 0, 0.1);
}

.container .left_Side {
  max-width: 1000px;
  position: relative;
  background: #0d5aad;
  padding: 40px;
}

.profileText {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 21px;
  border-bottom: 2px solid rgb(255, 255, 255);
}

.profileText .imgBox {
  position: relative;
  width: 199px;
  height: 199px;
  border-radius: 50%;
  overflow: hidden;
}

.profileText .imgBox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profileText h2 {
  color: #ffff;
  font-size: 1.5em;
  margin-top: 19px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2em;
}

.profileText h2 span {
  font-size: 0.8em;
  font-weight: 300;
}

.contactInformation {
  padding-top: 40px;
}

.title {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 1px;
}

.contactInformation ul {
  position: relative;
}

.contactInformation ul li {
  list-style: none;
  position: relative;
  margin: 10px 0;
}

.contactInformation ul li .icon {
  display: inline-block;
  width: 35px;
  font-size: 15px;
  color: aquamarine;
}

.contactInformation ul li span {
  color: #000000;
  font-weight: 300;
}

.container .right_Side {
  position: relative;
  background: #ffffff;
  padding: 40px;
}

.about {
  margin-bottom: 50px;
}

.about:last-child {
  margin-bottom: 0;
}

.title2 {
  color: #294ae9;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

p {
  color: #000000;
}

.about .box {
  display: flex;
  flex-direction: row;
  margin: 20px 0;
}

.about .box .year_Company {
  min-width: 150px;
}

.about .box .year_Company h5 {
  text-transform: uppercase;
  color: #565454;
}

.about .box .text h4 {
  text-transform: uppercase;
  color: #2a7da2;
  font-size: 16px;
}

.skills .box {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 150px 1fr;
  justify-content: center;
  align-items: center;
}

.skills .box h4 {
  text-transform: uppercase;
  color: #565454;
  font-weight: 500;
}

.skills .box .percent {
  position: relative;
  width: 100%;
  height: 10px;
  background: #f0f0f0;
}

.skills .box h4 .percent {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #2a7da2;
}

.skills .box .percent div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #2a7da2;
}

<body>
  <header>
    <nav>
      <div class="navbar">
        <div class="logo">
          <p>Navigation</p>
        </div>
        <ul>
          <li><a href="./index.html">Home</a></li>
          <li><a href="./indexresume.html">Resume</a></li>
          <li><a href="./projects.html">Projects</a></li>
        </ul>
      </div>
    </nav>
  </header>
  
  <div class="container">
    <div class="left_Side">
      <div class="profileText">
        <div class="imgBox">
          <img src="images/profile_pic.jfif" />
        </div>
        
        <h2>name<br /><span>Something here</span></h2>
      </div>
      
      <div class="contactInformation">
        <h3 class="title">Contact Info</h3>
        <ul>
          <li>
            <span class="icon"><i class="fa fa-phone-square" aria-hidden="true"></i></span><br />
            <span class="text">phone</span>
          </li>
          <li>
            <span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
            <span class="text"><span class="text">email</span></span>
          </li>
          <li>
            <span class="icon"><i class="fa fa-linkedin" aria-hidden="true"></i></span>
            <span class="text">linked in</span>
          </li>
          <li>
            <span class="icon"><i class="fa fa-address-card" aria-hidden="true"></i></span>
            <span class="text"><br />address</span>
          </li>
        </ul>
      </div>

      <div class="contactInformation education">
        <h2 class="title">Education</h2>
        
        <ul>
          <li>
            <span class="text">St. Cloud State University</span>
            <span class="text">December of 2022<br /></span>
            <span class="text">Bachelor of Science:<br />Information Systems</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="right_Side">
      <div class="about">
        <h2 class="title2">Summary Statement</h2>
        <p>
          blah blah
        </p>
      </div>

      <div class="about">
        <h2 class="title2">Work Experience</h2>
        <div class="box">
          <div class="year_Company">
            <h5>ASM Global,<br /> U.S. Bank Stadium</h5>
            <h5>Oct 2022 - Present</h5>
          </div>
          
          <div class="text">
            <h4>Event Day Support Technician</h4>
            <p>
              Provide tech support during major events at U.S. Bank Stadium. Duties include troubleshooting ticket scanners, iPad deployment in suites and clubs, deployment of wireless network and mobile carts, support of televisions and telephones, and assist with
              mobile app issues.
            </p>
          </div>
        </div>

        <div class="box">
          <div class="year_Company">
            <h5>name</h5>
            <h5>2010 - Present</h5>
          </div>
          
          <div class="text">
            <h4>Manager/Bartender/Server/Cook</h4>
            
            <p>
              blah blah
            </p>
          </div>
        </div>

        <div class="box">
          <div class="year_Company">
            <h5>company name</h5>
            <h5>April 2021 - July 2022</h5>
          </div>
          
          <div class="text">
            <h4>Server</h4>
            <p>
              blah blah
            </p>
          </div>
        </div>

        <div class="box">
          <div class="year_Company">
            <h5>Red Lobster</h5>
            <h5>dates</h5>
          </div>
          <div class="text">
            <h4>Server</h4>
            <p>
              blah blah
            </p>
          </div>
        </div>
      </div>
      <div class="about skills">
        <h2 class="title2">Skills</h2>
        <div class="box">
          <h4>Html</h4>
          <div class="percent">
            <div style="width:50%"></div>
          </div>
        </div>
        <div class="box">
          <h4>C#</h4>
          <div class="percent">
            <div style=" width:85%"></div>
          </div>
        </div>
        <div class="box">
          <h4>SQL</h4>
          <div class="percent">
            <div style="width:50%"></div>
          </div>
        </div>
      </div>
      <div class="about certifications">
        <h2 class="title2">Certifications</h2>
        <ul>
          <li>
            <span class="icon"></span>
            <span class="text">CompTIA Linux+ (XK0-004)</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

so here is the html.

Tags: css html

Answers

You did great by making your navbar fixed, however this is not enough. You still need to specify where you want to fix it in your page (in your case it’s in the top of the page):

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

Code to run:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
header {
  height: 75px;
  line-height: 75px;
  padding: 0px 100px;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(#0094ff, #00ffff);
}
nav .logo p {
  font-size: 30px;
  font-weight: bold;
  float: left;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
}
nav ul {
  float: right;
}
nav li {
  display: inline-block;
  list-style: none;
}
nav li a {
  font-size: 18px;
  text-transform: uppercase;
  padding: 0px 30px;
  color: #fff;
  text-decoration: none;
}
nav li a:hover {
  color: #0026ff;
  transition: all 0.4s ease 0s;
}
body {
  background: #2397b1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  min-height: 1000px;
  margin: 50px;
  background: #ffffff;
  display: grid;
  grid-template-columns: 1fr 3fr;
  box-shadow: 0 35px 55px rgba(0, 0, 0, 0.1);
}
.container .left_Side {
  max-width: 1000px;
  position: relative;
  background: #0d5aad;
  padding: 40px;
}
.profileText {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 21px;
  border-bottom: 2px solid rgb(255, 255, 255);
}
.profileText .imgBox {
  position: relative;
  width: 199px;
  height: 199px;
  border-radius: 50%;
  overflow: hidden;
}
.profileText .imgBox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profileText h2 {
  color: #ffff;
  font-size: 1.5em;
  margin-top: 19px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2em;
}
.profileText h2 span {
  font-size: 0.8em;
  font-weight: 300;
}
.contactInformation {
  padding-top: 40px;
}
.title {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 1px;
}
.contactInformation ul {
  position: relative;
}
.contactInformation ul li {
  list-style: none;
  position: relative;
  margin: 10px 0;
}
.contactInformation ul li .icon {
  display: inline-block;
  width: 35px;
  font-size: 15px;
  color: aquamarine;
}
.contactInformation ul li span {
  color: #000000;
  font-weight: 300;
}
.container .right_Side {
  position: relative;
  background: #ffffff;
  padding: 40px;
}
.about {
  margin-bottom: 50px;
}
.about:last-child {
  margin-bottom: 0;
}
.title2 {
  color: #294ae9;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
p {
  color: #000000;
}
.about .box {
  display: flex;
  flex-direction: row;
  margin: 20px 0;
}
.about .box .year_Company {
  min-width: 150px;
}
.about .box .year_Company h5 {
  text-transform: uppercase;
  color: #565454;
}
.about .box .text h4 {
  text-transform: uppercase;
  color: #2a7da2;
  font-size: 16px;
}
.skills .box {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 150px 1fr;
  justify-content: center;
  align-items: center;
}
.skills .box h4 {
  text-transform: uppercase;
  color: #565454;
  font-weight: 500;
}
.skills .box .percent {
  position: relative;
  width: 100%;
  height: 10px;
  background: #f0f0f0;
}
.skills .box h4 .percent {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #2a7da2;
}
.skills .box .percent div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #2a7da2;
}

<body>
  <header>
    <nav>
      <div class="navbar">
        <div class="logo">
          <p>Navigation</p>
        </div>
        <ul>
          <li><a href="./index.html">Home</a></li>
          <li><a href="./indexresume.html">Resume</a></li>
          <li><a href="./projects.html">Projects</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="container">
    <div class="left_Side">
      <div class="profileText">
        <div class="imgBox">
          <img src="images/profile_pic.jfif" />
        </div>
        <h2>name<br /><span>Something here</span></h2>
      </div>
      <div class="contactInformation">
        <h3 class="title">Contact Info</h3>
        <ul>
          <li>
            <span class="icon"><i class="fa fa-phone-square" aria-hidden="true"></i></span><br />
            <span class="text">phone</span>
          </li>
          <li>
            <span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
            <span class="text"><span class="text">email</span></span>
          </li>
          <li>
            <span class="icon"><i class="fa fa-linkedin" aria-hidden="true"></i></span>
            <span class="text">linked in</span>
          </li>
          <li>
            <span class="icon"><i class="fa fa-address-card" aria-hidden="true"></i></span>
            <span class="text"><br />address</span>
          </li>
        </ul>
      </div>

      <div class="contactInformation education">
        <h2 class="title">Education</h2>
        <ul>
          <li>
            <span class="text">St. Cloud State University</span>
            <span class="text">December of 2022<br /></span>
            <span class="text">Bachelor of Science:<br />Information Systems</span>

          </li>
        </ul>
      </div>
    </div>

    <div class="right_Side">
      <div class="about">
        <h2 class="title2">Summary Statement</h2>
        <p>
          blah blah
        </p>
      </div>

      <div class="about">
        <h2 class="title2">Work Experience</h2>
        <div class="box">
          <div class="year_Company">
            <h5>ASM Global,<br /> U.S. Bank Stadium</h5>
            <h5>Oct 2022 - Present</h5>
          </div>
          <div class="text">
            <h4>Event Day Support Technician</h4>
            <p>
              Provide tech support during major events at U.S. Bank Stadium. Duties include troubleshooting ticket
              scanners, iPad deployment in suites and clubs, deployment of wireless network and mobile carts,
              support of televisions and telephones, and assist with mobile app issues.
            </p>
          </div>
        </div>

        <div class="box">
          <div class="year_Company">
            <h5>name</h5>
            <h5>2010 - Present</h5>
          </div>
          <div class="text">
            <h4>Manager/Bartender/Server/Cook</h4>
            <p>
              blah blah
            </p>
          </div>
        </div>

        <div class="box">
          <div class="year_Company">
            <h5>company name</h5>
            <h5>April 2021 - July 2022</h5>
          </div>
          <div class="text">
            <h4>Server</h4>
            <p>
              blah blah
            </p>
          </div>
        </div>

        <div class="box">
          <div class="year_Company">
            <h5>Red Lobster</h5>
            <h5>dates</h5>
          </div>
          <div class="text">
            <h4>Server</h4>
            <p>
              blah blah
            </p>
          </div>
        </div>
      </div>
      <div class="about skills">
        <h2 class="title2">Skills</h2>
        <div class="box">
          <h4>Html</h4>
          <div class="percent">
            <div style="width:50%"></div>
          </div>
        </div>
        <div class="box">
          <h4>C#</h4>
          <div class="percent">
            <div style=" width:85%"></div>
          </div>
        </div>
        <div class="box">
          <h4>SQL</h4>
          <div class="percent">
            <div style="width:50%"></div>
          </div>
        </div>
      </div>
      <div class="about certifications">
        <h2 class="title2">Certifications</h2>
        <ul>
          <li>
            <span class="icon"></span>
            <span class="text">CompTIA Linux+ (XK0-004)</span>
          </li>
        </ul>
      </div>

    </div>
  </div>
</body>

I know you have your answer but here I submit an alternative to make your page more responsive and the CSS easier to understand.

Used grid for layout; created a header, left, main, right and footer (you did not have a footer but added it to illustrate the "holy grail" layout
Not a single "position" anywhere which tends to break things in unexpected or difficult ways to fix
Killed the float in favor of grid layout and a bit of flex
Removed the "h" tags "h2, h4, h5" and replaced with "h" classes h2, h4 etc. – comment in the CSS as to WHY for study/reading
Added some really ugly borders and padding/margins just to show what is where clearly; can be removed in a "production" sheet
Altered some classes and added small bits of markup to make things more consistent.
You used Font Awesome fonts so I adjusted some to actually use them (phone seems off but not part of this)
Background colors are not so great IMHO actually bad but that is a choice
This is a LOT of CSS given the complex desired layout, and using the "same" layout for sections including classes can reduce a lot of this
Making this "better" is likely mostly a matter of reducing the complexity in the layout and then the CSS and better color choice from this "ugly" one

Not 100% sure on your desired layout and contents for the left, main, and right but you can easily move things around a bit

* {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

body {
  display: grid;
  grid-template-areas: /* Each area is a row */
  "head" "left" "main" "right" "footer";
  /* background-color: #2397b1;*/
  border: solid 3px pink;
}

@media (min-width: 600px) {
  body {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: /* Build the Holy Grail layout */
    "head head head" "left main right" "footer footer footer";
    grid-gap: 0.25rem;
    /*  background-color: #2397b1;*/
    border: solid 4px pink;
  }
}

header {
  grid-area: head;
  border: solid 2px #FFFF00;
}

.container-left {
  grid-area: left;
  display: grid;
  grid-template-areas: "profile" "contact";
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  /* style */
  color: #FFFFFF;
  background-color: #0d5aad;
  padding: 1em;
  /*box-shadow: 0 35px 55px rgba(0, 0, 0, 0.1);*/
  border: solid 2px #00FF00;
}

.container-main {
  grid-area: main;
  border: solid 3px #ff4500;
}

.container-right {
  grid-area: right;
  background-color: #0d5aad;
  color: #FF0000;
  border: solid 2px #FF00FF;
}

footer {
  grid-area: footer;
  text-align: center;
  height: 2rem;
  background-image: linear-gradient(#00ffff, #0094ff);
}

header nav.navbar {
  display: grid;
  grid-template-areas: "logo links links links";
  grid-template-rows: 3rem;
  grid-template-columns: repeat(4, 1fr);
  /* style */
  text-transform: uppercase;
  color: #FFFFFF;
  background-image: linear-gradient(#0094ff, #00ffff);
}

header nav.navbar .logo {
  padding-left: 0.25rem;
  grid-area: logo;
}

header nav.navbar .nav-links {
  grid-area: links;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* style */
  cursor: pointer;
  list-style: none;
}

header nav.navbar .logo .logo-text {
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

header nav.navbar .nav-links .link-item {
  font-size: 1.25rem;
  padding: 0px 30px;
  color: #FFFFFF;
  text-decoration: none;
}

header nav.navbar .nav-links .link-item:hover {
  color: #0026ff;
  transition: all 0.4s ease 0s;
}

.container-left .container-profile {
  grid-area: profile;
}

.container-left .container-contact {
  grid-area: contact;
}

.container-left .container-profile .profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid #FFFFFF);
}

.container-left .container-profile .profile .name-container {
  color: #FFFFFF;
  font-size: 1.5em;
  margin-top: 1rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2em;
}

.container-left .container-profile .profile .img-box {
  border-radius: 50%;
  overflow: hidden;
}

.container-left .container-profile .profile .img-box img {
  object-fit: cover;
  border: inset green 5px;
}

.container-left .container-profile .profile .name-container .profile-name,
.container-left .container-profile .profile .name-container .profile-something {
  font-size: 0.8em;
  font-weight: 300;
}

.container-left .container-contact .title {
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  /* style of prior h tag */
  font-weight: 100;
  letter-spacing: 1px;
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

.container-left .container-contact .contact-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.container-left .container-contact .contact-details .contact-item {
  list-style: none;
  /*  position: relative;*/
  margin: 10px 0;
}

.container-left .container-contact .contact-details .contact-item * {
  color: #000000;
  font-weight: 300;
}

.container-left .container-contact .contact-details .contact-item .icon {
  display: inline-block;
  width: 2rem;
  font-size: 1rem;
  color: aquamarine;
}

.container-right .container-education {
  color: #d0d0ff;
}

.container-main {
  background-color: #FFFFFF;
  display: grid;
  grid-template-areas: /* Each area is a row */
  "summary" "work" "skills" "certs";
}

.container-main .about-summary {
  grid-area: summary;
}

.container-main .about-certifications {
  grid-area: certs;
}

.container-main .about-skills {
  grid-area: skills;
}

.container-main .about-work {
  grid-area: work;
}

.container-main .about-summary .text-description {
  color: #ffffff;
  grid-area: summary;
}

.container-main .about-work .work-items .work-box {
  display: grid;
  grid-template-areas: "company text";
  grid-template-columns: 1fr repeat(auto-fit, minmax(80px, 1fr));
  grid-template-columns: 1fr 1fr;
}

.container-main .about-work .work-items .work-box .company-year {
  grid-area: company;
}

.container-main .about-work .work-items .work-box .text {
  grid-area: text;
}

.container-main .about-summary .title-about,
.container-main .about-skills .title-about,
.container-main .about-certifications .title-about,
.container-main .about-work .title-about {
  color: #294ae9;
  text-transform: uppercase;
}

.container-main .about-certifications .certs-box li {
  display: grid;
  grid-template-areas: "icon text";
  grid-template-columns: 1fr repeat(auto-fit, minmax(3rem, 1fr));
  grid-template-columns: 1fr 1fr;
}

.container-main .about-certifications .certs-box .icon {
  grid-area: icon;
}

.container-main .about-certifications .certs-box .text {
  grid-area: text;
}

.container-main .about-skills .skills-box {
  display: grid;
  grid-template-areas: "name percent";
  grid-template-columns: 10ch repeat(auto-fit, minmax(3rem, 1fr));
  align-items: center;
  grid-template-rows: 2rem;
}

.container-main .about-skills .skills-box .skill {
  grid-area: name;
}

.container-main .about-skills .skills-box .percent {
  grid-area: percent;
}

.container-main .about-skills .percent {
  height: 10px;
  background-color: #f0f0f0;
}

.container-main .about-skills .percent>div {
  height: 100%;
  background-color: #2a7da2;
}


/* h classes Why this? 
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes */

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 .h-base {
  font-size: 1rem;
  display: block;
  font-weight: bold;
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.h1 {
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}

.h2 {
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
}

.h3 {
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.h4 {
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
}

.h5 {
  font-size: 0.83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
}

.h6 {
  font-size: 0.67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<body>
  <header>
    <nav class="navbar">
      <div class="logo">
        <div class="logo-text">Navigation</div>
      </div>
      <ul class="nav-links">
        <li><a class="link-item" href="./index.html">Home</a></li>
        <li><a class="link-item" href="./indexresume.html">Resume</a></li>
        <li><a class="link-item" href="./projects.html">Projects</a></li>
      </ul>
    </nav>
  </header>
  <div class="container-left">
    <div class="container-profile">
      <div class="profile">
        <div class="img-box">
          <img src="images/profile_pic.jfif" alt="Profile Picture" />
        </div>
        <div class="name-container">
          <div class="profile-name">name</div>
          <div class="profile-something">Something here</div>
        </div>
      </div>
    </div>
    <div class="container-contact">
      <div class="title">Contact Info</div>
      <ul class="contact-details">
        <li class="contact-item">
          <span class="icon"><i class="fa fa-solid fa-phone" aria-hidden="true"></i></span>
          <span class="text">phone</span>
        </li>
        <li class="contact-item">
          <span class="icon"><i class="fa-regular fa-envelope" aria-hidden="true"></i></span>
          <span class="text"><span class="text">email</span></span>
        </li>
        <li class="contact-item">
          <span class="icon"><i class="fa-brands fa-linkedin" aria-hidden="true"></i></span>
          <span class="text">linked in</span>
        </li>
        <li class="contact-item">
          <span class="icon"><i class="fa fa-address-card" aria-hidden="true"></i></span>
          <span class="text">address</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="container-main">
    <div class="about-summary">
      <div class="h2 title-about">Summary Statement</div>
      <p class="text-description">
        blah blah
      </p>
    </div>
    <div class="about-work">
      <div class="h2 title-about">Work Experience</div>
      <div class="work-items">
        <div class="work-box">
          <div class="company-year">
            <div class="h5">ASM Global,<br /> U.S. Bank Stadium</div>
            <div class="h5">Oct 2022 - Present</div>
          </div>
          <div class="text">
            <div class="h4">Event Day Support Technician</div>
            <p>
              Provide tech support during major events at U.S. Bank Stadium. Duties include troubleshooting ticket scanners, iPad deployment in suites and clubs, deployment of wireless network and mobile carts, support of televisions and telephones, and assist with
              mobile app issues.
            </p>
          </div>
        </div>
        <div class="work-box">
          <div class="company-year">
            <div class="h5">name</div>
            <div class="h5">2010 - Present</div>
          </div>
          <div class="text">
            <div class="h4">Manager/ Bartender /Server /Cook</div>
            <p>
              blah blah
            </p>
          </div>
        </div>

        <div class="work-box">
          <div class="company-year">
            <div class="h5">company name</div>
            <div class="h5">April 2021 - July 2022</div>
          </div>
          <div class="text">
            <div class="h4">Server</div>
            <p>
              blah blah
            </p>
          </div>
        </div>

        <div class="work-box">
          <div class="company-year">
            <div class="h5">Red Lobster</div>
            <div class="h5">dates</div>
          </div>
          <div class="text">
            <div class="h4">Server</div>
            <p>
              blah blah
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="about-skills">
      <div class="title-about h2">Skills</div>
      <div class="skills-box">
        <div class="h4">Html</div>
        <div class="percent">
          <div style="width:50%"></div>
        </div>
      </div>
      <div class="skills-box">
        <div class="h4 skill">C#</div>
        <div class="percent">
          <div style="width:85%"></div>
        </div>
      </div>
      <div class="skills-box">
        <div class="h4 skill">SQL</div>
        <div class="percent">
          <div style="width:50%"></div>
        </div>
      </div>
      <div class="skills-box">
        <div class="h4 skill">CSS</div>
        <div class="percent">
          <div style="width:12%"></div>
        </div>
      </div>
    </div>
    <div class="about-certifications">
      <div class="title-about h2">Certifications</div>
      <ul class="certifications certs-box">
        <li>
          <span class="icon"><i class="fa-solid fa-certificate"></i></span>
          <span class="text">CompTIA Linux+ (XK0-004)</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="container-right">
    <div class="container-education">
      <div class="title ">Education</div>
      <div class="education-details">
        <div class="education-item">St. Cloud State University</div>
        <div class="education-item">December of 2022</div>
        <div class="education-item">Bachelor of Science:<br />Information Systems</div>
      </div>
    </div>
  </div>
  <footer>I am the footer</footer>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.