Using Background size cover property in the CSS to cover the entire available screen size without scroll left-right

Question

Trying to fix the lower section, span with anchor text. But its not helping out! It is require to use the background size:cover property. I've used in the header and it seems working but the same is not working with the lower section.

Here Goes the GitHub Repo

Here is old Apple.com Website from which clone is to be made

Here goes HTML:

<main>
<div class="lowerContainer">
            <a href="#"><span class="lowerImage lowerImg1"></span></a>
            <a href="#"><span class="lowerImage lowerImg2"></span></a>
            <a href="#"><span class="lowerImage lowerImg3"></span></a>
            <a href="#"><span class="lowerImage lowerImg4"></span></a>
        </div>
    </main>

Here goes the CSS:

span {
  display: block;
}
.lowerContainer {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 1445px;
  border: #fff;
  border-width: 10px;
  background-size: cover;
}

.lowerImage {
  margin-left: 1.5px;
  padding: 5px;
  width: 364px;
  background-size: cover;
  height: 190px;
  display: block;
  cursor: pointer;
  z-index: 1;
}

.lowerImg1 {
  background-image: url(../images/mobile-1.jpg);
}

.lowerImg2 {
  background-image: url(../images/mobile-2.jpg);
}

.lowerImg3 {
  background-image: url(../images/mobile-3.jpg);
}

.lowerImg4 {
  background-image: url(../images/mobile-4.jpg);
}

Any Help will be greatly Appreciated! Thanks!

Answer 1

you can try it this code to perfect view.

    background-position: center;

this CSS to set the position of images to display.

.lowerImage {
  margin-left: 1.5px;
  padding: 5px;
  width: 364px;
  background-size: cover;
  background-position: center;
  height: 190px;
  display: block;
  cursor: pointer;
  z-index: 1;
}

Answer 2

The width of each span is 364px so total width becomes 1456px which is more then the max-width of the .lowerContainer that is 1445px , so this can be the reason for left-right scroll.

Try to set the width for .lowerImage less, so that the combined width of all the <span> tags doesn't increases more than .lowerContainer max-width.

.lowerImage {
  padding: 5px;
  width: 360px;
  background-size: cover;
  height: 190px;
  display: block;
  cursor: pointer;
  z-index: 1;
}

Hope it works.