How do I fix an image so that it doesn't move when I use a smaller screen?

When i use an extra-small screen, an image in the middle of my site stops becoming centered. How do I fix this? Any gelp would be greatly appreciated.

Hey there @dinnosam :grinning:

There are quiet a few different reasons this could happen, it would probably be helpful if you could post your code.

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <link href="boot.css" type="text/css" rel="stylesheet"/>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- Bootstrap CSS -->

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <title>Dinno Optical</title>

</head>

<body>

  <!-- Navbar Component-->

  <nav class="navbar navbar-expand-lg navbar-light" style="position: sticky; top: 0; z-index: 999; background-color: white;">

    <a class="navbar-brand" href="Index-Boot.html"><img  src="./pictures/logo.png" width="50" height="50"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav mr-auto">

        <li class="nav-item active">

            <a class="nav-link active" href="Index-Boot.html" style="font-weight: 900; color: #06cece;">Dinno Optical</a>

          </li>

          <li class="nav-item">

        <li class="nav-item">

          <a class="nav-link" href="Book with Us--Boot.html">Book an appointment!</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="Offers--Boot.html">New collection!</a>

        </li>

       <!-- <li class="nav-item dropdown">

          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

            What's in-store

          </a>

          <div class="dropdown-menu" aria-labelledby="navbarDropdown">

            <a class="dropdown-item" href="sunglasses.html">Sunglasses</a>

            <a class="dropdown-item" href="#">Frames</a>

          </div>

        </li>-->

        <li class="nav-item">

          <a class="nav-link" href="About us--Boot .html" tabindex="-1" aria-disabled="true">About us</a>

        </li>

      </ul>

    </div>

  </nav>

  <!-- Jumbotron    <h1 class=".text-white text-center">Dinno</h1> 

    <p class=".text-white text-center">Optical</p>  -->

  <div class="jumbotron jumbotron-fluid .bg-secondary" style="background:url(./pictures/Dinno\ Optical\ advert.jpg) no-repeat; background-size: cover;

  "> 

  <div class="text-center" style="opacity: 0.9; padding: 200px; background-repeat: no-repeat;"> 

    <img src="pictures/Dinno Optical main page pic.png" width="300" height="300">

  </div>