my images (tagged under div s) are unable to sit side by side on the same row

Question

My images won\'t sit side by side & I\'m not sure why.

I\'ve set the display to be inline and it still doesn\'t work.

I think i should mention that i\'d like t

Answer 1

try this instead,

Add display:flex; to body. also add vertical-align:top;to all image that is

body{
  display:flex;
}
img{
  vertical-align:top;
}

* { 
  box-sizing: border-box; 
}
body{
  width: 999px;
  height: 1000px;
  text-decoration: none;
  display:flex;
}

img{
  vertical-align:top;
  border:1px solid #111;
}

<div class='logo'>
   <img src='https://i.stack.imgur.com/8U82Z.png' width ="75px">
  </div>
  <div class = 'menu'>
      <div class = 'above'></div>
      <div class = 'homebutton'>
          <a href = 'Code draft.html'>
              <img src = 'https://i.stack.imgur.com/QM11G.png' width = "50px">
          </a>
      </div>
      <div class = 'settingsbutton'>
          <a href = 'menusettings.html'>
              <img src = 'https://i.stack.imgur.com/LFcP2.png' width = "50px">
          </a>
      </div>
   </div>
   <div class = 'below'>
      <div class = 'fypbutton'>
          <a href = 'fyp.html'>
              <img src = 'https://i.stack.imgur.com/rV49R.png' width = "50px">
          </a>
      </div>
      <div class = 'searchbutton'>
          <a href = 'search.html'>
              <img src = 'https://i.stack.imgur.com/z6gVZ.png' width = "50px">
          </a>
      </div>
   </div>
  <div class="pfp">
     <a href="Profile Page.html">
        <img src='https://i.stack.imgur.com/qpEQy.png' width = "29px">
     </a>
  </div>
</div>

Answer 2

Remove display: inline from menu class and add display: flex again if you want to align all the elements with the logo than just change the position of menu div, make it as a mother div. Hope it solves your problem

* {
  box-sizing: border-box;
}

body {
  display: inline-block;
  width: 999px;
  height: 1000px;
  text-decoration: none;
}

.logo {
  padding: 5px;
  display: inline;
}

.menu {
  display: flex;
}

<div class='menu'>
  <div class='logo'>
    <img src='https://i.ibb.co/h9L3Fyq/logo.jpg'  width='100'>
  </div>
  <div class='above'>
    <div class='homebutton'>
      <a href='Code draft.html'>
        <img src='https://via.placeholder.com/140x100' width='50'>
      </a>
    </div>
    <div class='settingsbutton'>
      <a href='menusettings.html'>
        <img src='https://via.placeholder.com/140x100' width='50'>
      </a>
    </div>
  </div>
  <div class='below'>
    <div class='fypbutton'>
      <a href='fyp.html'>
        <img src='https://via.placeholder.com/140x100' width='50'>
      </a>
    </div>
    <div class='searchbutton'>
      <a href='search.html'>
        <img src='https://via.placeholder.com/140x100' width='50'>
      </a>
    </div>
  </div>
  <div class="pfp">
    <a href="Profile Page.html">
      <img src='https://via.placeholder.com/140x100' width='50'>
    </a>
  </div>
</div>