Not able to move this div left?

Question

Ii am trying to move the searchUserDiv to the left to o create the bellow layout. However everything I have tried has failed so far to move the div to the left. How can I achieve this?

Here is my current code and the resulting layout.

.searchResultsList {
  background-color: lightblue;
}

.searchResultsList li {
  list-style: none;
}
.searchResultsList * {
  background-color: grey;
  /* margin: 13px 0 13px 0; */
  margin-top: 10px;
  margin-bottom: 10px;
  /* margin-left: 0px; */
  cursor: pointer;
}

.searchUserDiv {
  display: flex;
  align-items: center;
  /* background-color: #353258;
  border: 1px solid #4152F1; */
  color: white;
  cursor: pointer;
  padding-left: 10px;
  width: 85%;
  border-radius: 32px;
}
.searchUsername {
  display: flex;
  align-items: center;
  font-size: 18px;
  font: Arial;
  font-family: sans-serif;
  margin-top: 0px;
  padding-left: 10px;
}
.searchUserProfImg {
  padding-left: 5px;
  height: 40px;
  width:40px;
}

<ul class="searchResultsList" id="searchResultsList">
          <!-- style="display: none;" -->
          <li class="searchUserDiv">
            <img class="searchUserProfImg" id="searchUserProfImg" src="images/defaultProfImg.png">
            <label class="searchUsername" id="searchUsername">username</label>
          </li>
          <li class="searchUserDiv">
            <img class="searchUserProfImg" id="searchUserProfImg" src="images/defaultProfImg.png">
            <label class="searchUsername" id="searchUsername">username</label>
          </li>
          <li class="searchUserDiv">
            <img class="searchUserProfImg" id="searchUserProfImg" src="images/defaultProfImg.png">
            <label class="searchUsername" id="searchUsername">username</label>
          </li>
        </ul>

Thanks for any suggestions or solutions, I very much appreciate it!

`` is an element to control the behavior of form action elements, so not the right semantical use to just put a name in there... — Roko C. Buljan, Feb 16 '20 at 00:55
Also duplicated ID are invalid. That's what the name says... ID, *Identification*. Use just classes. — Roko C. Buljan, Feb 16 '20 at 01:02

score 1 · Accepted Answer · answered Feb 16 '20 at 00:56

1

Your ul.searchResultsList has a left padding of 40px set by the browser because it's a list. Set padding-left: 0.

answered Feb 16 '20 at 00:56

Denis G. Labrecque

1,023
13
29

Even by doing this OP if miles away from the provided design – Roko C. Buljan Feb 16 '20 at 00:56
@RokoC.Buljan Agreed, but just wanted to answer his question. He specified that his difficulty in copying the design is the left alignment. – Denis G. Labrecque Feb 16 '20 at 01:21

Not able to move this div left?

1 Answers1