CSS sections overlaping and images not centering

user_15412357 0
Viewed 68

I'm trying to make a simple webpage and have had some trouble with CSS. My first problem is that the headerImg is not displaying with the full width of the browser and has a small margin to the right that I can't seem to fin why.

My second problem are the images inside the #work .section, they overlap the #contactMe section and can't find a way to center them to be all 4 images in 2 columns in the center of the page. They keep pulling to the left side of the page no matter what I change.

Finally, I can't find a way for the tags to be responsive to changes in the browser so that they all appear inside the header even when the browser changes sizes.

THANK YOUUUUUUU I'm super new to CSS and absolutely hate it hahah

@font-face { font-family: Cherolina; src: url('./Fonts/coolvetica.ttf'); } 
@font-face { font-family: Roboto; src: url('./Fonts/Roboto-Thin.ttf'); } 
@font-face { font-family: RobotoR; src: url('./Fonts/Roboto-Regular.ttf'); } 

:root{
    --white: #ffffff;
    --dark: #90323d;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: #f8edeb;
}

header {
    padding: 2%;
    font-family: Cherolina;
    background-color: var(--dark);
    color: var(--white);
}

header h1 {
    display: inline-block;
    font-size: 70px;
    margin-left: 20px;
    margin-bottom: 10px;
}

header section {
    padding-top: 40px;
    float: right;
    font-family: Roboto;
    font-size: 20px;
}

header section ul {
    list-style-type: none;
}

header section ul li {
    display: inline-block;
    margin-left: 25px;
}

.headerImg{
    margin: 0;
    width: 100%;
    height: 150px;
    overflow: hidden;
    opacity: 70%;
}



header section a {
    color: var(--white);
    text-decoration: none;
}

p {
    font-size: 20px;
}

.float-left {
    float: left;
    margin-right: 25px;
}

.float-right {
    float: right;
    margin-left: 25px;
}

.sections{
    margin: 50px 50px 50px 50px;
    width: 90%;
    height: 500px;
    display: inline-block;
}

.sections p{
    font-family: roboto;
    margin-top: 50px;
    text-align: justify;
    margin-left: 110px;
    width: 40%;
    display:inline-block;
}

.content h2{
    font-family: cherolina;
    color: var(--dark);
    font-size: 60px;
    margin: 0 100px 0 100px;
    border-bottom: 2px solid var(--white);
}

.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content img{
    width: 550px;
    height: 360px;
    background-size: cover;
    margin: 50px 0 50px 0;
}

.content ul {
    list-style-type: none;
    background-color: rgba(255,255,255,.70);
    height: 30%;
    margin-top: 90px;
}

.content li {
    display: inline;
    font-family: roboto;
    margin: 70px 50px 50px 50px;
    float: right;
}

.content a {
    text-decoration: none;
    color: black;
    border-bottom: .5px solid black;
    font-size: 20px;
}

#work a{
    border-bottom: 0px;
}

#firstWeb{
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    float: none;
    opacity: 100%;
    flex-wrap: nowrap;
}

.workImg{
    display: inline-block;
    column-count: 2;
    margin-bottom: 0;
    margin-top: 0;
    opacity: 100%;
} 

.workImg:hover{
    opacity: 70%;
}

#firstWeb:hover{
    opacity: 70%;
}

footer {
    padding: 30px;
    clear: both;
    text-align: center;
    font-family: Cherolina;
    background-color: var(--dark);
}

footer h2 {
    font-size: 20px;
    color: var(--white);
}
<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./Assets/style.css">
    <title>Portfolio</title>
</head>

<body>
    <header>
        <h1>MR</span></h1>
        <section>
            <ul>
                <li>
                    <a href="#aboutMe">About me</a>
                </li>
                <li>
                    <a href="#work">Work</a>
                </li>
                <li>
                    <a href="#contactMe">Contact me</a>
                </li>
            </ul>
        </section>
    </header>

    <section class="headerImg">
        <img src="./assets/Images/header.png">
    </section>

    <section class="content">

        <section id="aboutMe" class="sections">
            <h2 class="float-right">About Me</h2>
            <img src="./assets/Images/aboutMe.jpg" class="float-left" />
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam, laudantium nihil explicabo maxime molestias nam earum commodi eligendi at eaque perferendis dolorem temporibus alias repudiandae est assumenda, illum quas! Ipsam!
            </p>
        </section>

        <section id="work" class="sections">
            <h2 class="float-left">Work</h2>
            <a href="https://github.com"><img id="firstWeb" src="./Assets/Images/firstWeb.webp" /></a>
            <a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>
            <a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>
            <a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>
            <a href="https://github.com"><img class="workImg" src="./Assets/Images/work.png" /></a>

        </section>

        <section id="contactMe" class="sections">
            <h2 class="float-right">Contact Me</h2>
            <ul>
                <li>
                    <a href="https://github.com">Github</a>
                </li>
                <li>
                    <a href="https://LinkedIn.com">LinkedIn</a>
                </li>
                <li>
                    <a>@gmail.com</a>
                </li>
                <li>
                    <a>55XXXX</a>
                </li>
            </ul>
        </section>

    </section>
    
    <footer>
        <h2>Made with ❤️️</h2>
    </footer>
</body>

</html>

flexbox centering css html
1 Answers

Can you please check the below code? Hope it will work for you.

  1. Solution for your First problem is that you need to give width:100% and height:100%; to the image (.headerImg img) so that the image will cover the full width of the browser.
  2. You have given fix height:500px to all the sections which create an issue and overlap the content of another section. You can set min-height:500px which can solve the overlapping issue.
  3. In your "work" section you want to display all 4 images in 2 columns in the center of the page, simply wrap the 4 images inside a div and using flex utility classes you can align the images and keep it in the center of the webpage.
  4. Note: To center the images and align them side by side, refer 'flex' property, it will help you to align content as per your requirement.
  5. You can use media queries to make content responsive when the browser size changes.

Please refer to this link: https://jsfiddle.net/yudizsolutions/Lmvahgwz/

@font-face { font-family: Cherolina; src: url('./Fonts/coolvetica.ttf'); } 
@font-face { font-family: Roboto; src: url('./Fonts/Roboto-Thin.ttf'); } 
@font-face { font-family: RobotoR; src: url('./Fonts/Roboto-Regular.ttf'); } 

:root{
    --white: #ffffff;
    --dark: #90323d;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: #f8edeb;
}

header {
    padding: 2%;
    font-family: Cherolina;
    background-color: var(--dark);
    color: var(--white);
}

header h1 {
    display: inline-block;
    font-size: 70px;
    margin-left: 20px;
    margin-bottom: 10px;
}

header section {
    padding-top: 40px;
    float: right;
    font-family: Roboto;
    font-size: 20px;
}

header section ul {
    list-style-type: none;
}

header section ul li {
    display: inline-block;
    margin-left: 25px;
}

.headerImg{
    margin: 0;
    width: 100%;
    height: 150px;
    overflow: hidden;
    opacity: 70%;
}



header section a {
    color: var(--white);
    text-decoration: none;
}

.headerImg img { width:100%; height:100%; object-fit:cover;}

p {
    font-size: 20px;
}

.float-left {
    float: left;
    margin-right: 25px;
}

.float-right {
    float: right;
    margin-left: 25px;
}

.sections{
    margin: 50px auto;
    width: 90%;
    min-height: 500px;
    display: inline-block;
}

.sections p{
    font-family: roboto;
    margin-top: 50px;
    text-align: justify;
    margin-left: 110px;
    width: 40%;
    display:inline-block;
}

.content h2{
    font-family: cherolina;
    color: var(--dark);
    font-size: 60px;
    margin: 0 100px 0 100px;
    border-bottom: 2px solid var(--white);
}

.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content img{
    width: 100%;
    height: 360px;
    background-size: cover;
    margin: 50px 0 50px 0;
}

.content ul {
    list-style-type: none;
    background-color: rgba(255,255,255,.70);
    height: 30%;
    margin-top: 90px;
        overflow: hidden;
}

.content li {
    display: inline;
    font-family: roboto;
    margin: 70px 50px 50px 50px;
    float: right;
}

.content a {
    text-decoration: none;
    color: black;
    border-bottom: .5px solid black;
    font-size: 20px;
}

#work a{
    border-bottom: 0px;
}

#firstWeb{
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    float: none;
    opacity: 100%;
    flex-wrap: nowrap;
}

.work-content { display:flex; align-items:center; justify-content:center; flex-wrap: wrap;}
.work-content a { margin:0px 15px; width: calc(50% - 30px);}

.workImg{
    display: inline-block;
    column-count: 2;
    margin-bottom: 0;
    margin-top: 0;
    opacity: 100%;
} 

.workImg:hover{
    opacity: 70%;
}

#firstWeb:hover{
    opacity: 70%;
}

footer {
    padding: 30px;
    clear: both;
    text-align: center;
    font-family: Cherolina;
    background-color: var(--dark);
}

footer h2 {
    font-size: 20px;
    color: var(--white);
}
<!DOCTYPE html>
<html lang="en-us">

  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./Assets/style.css">
    <title>Portfolio</title>
  </head>

  <body>
    <header>
      <h1><span>MR</span></h1>
      <section>
        <ul>
          <li>
            <a href="#aboutMe">About me</a>
          </li>
          <li>
            <a href="#work">Work</a>
          </li>
          <li>
            <a href="#contactMe">Contact me</a>
          </li>
        </ul>
      </section>
    </header>

    <section class="headerImg">
      <img src="https://via.placeholder.com/512x212">
    </section>

    <section class="content">

      <section id="aboutMe" class="sections">
        <h2 class="float-right">About Me</h2>
        <img src="https://via.placeholder.com/200" class="float-left" />
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam, laudantium nihil explicabo maxime
          molestias nam earum commodi eligendi at eaque perferendis dolorem temporibus alias repudiandae est
          assumenda, illum quas! Ipsam!
        </p>
      </section>

      <section id="work" class="sections">
        <h2 class="float-left">Work</h2>
        <a href="https://github.com"><img id="firstWeb" src="https://via.placeholder.com/150" /></a>
        <div class="work-content">
          <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        </div>
      </section>

      <section id="contactMe" class="sections">
        <h2 class="float-right">Contact Me</h2>
        <ul>
          <li>
            <a href="https://github.com">Github</a>
          </li>
          <li>
            <a href="https://LinkedIn.com">LinkedIn</a>
          </li>
          <li>
            <a>@gmail.com</a>
          </li>
          <li>
            <a>55XXXX</a>
          </li>
        </ul>
      </section>

    </section>

    <footer>
      <h2>Made with ❤️️</h2>
    </footer>
  </body>

</html>

user_122138960
Related