Flex items having unwanted space between them seemingly out of nowhere

michael4220377918 · May 7, 2022, 11:27am

I am trying to have a set of 5 pictures with captions sit together within a container of 1000px width, each image is 300px in width and should be able to have 3 sit next to each to each other in its row and the other two wrap to the next line, however there is some unexplained space between them.

I cant for the life of me figure out why my flex elements within the container are not sitting together closely.

html in question from line 36-61

github.com

MediumBlock/Tea-Cozy/blob/main/index.html

<!DOCTYPE html>
<html>

<head>
  <title>Tea Cozy, for everything Tea</title>
  <link href='styles.css' rel='stylesheet'>
</head>
<body>
  <!-- Header -->
  <div class="header">
    <div class="container">
      <div id="logo" class="left">
        <img src="resources/img-tea-cozy-logo.webp">
      </div>
      <div id="navi" class="right">
        <nav role="navigation">
          <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>

This file has been truncated. show original

css in question (I think) is from line 45-61

github.com

MediumBlock/Tea-Cozy/blob/main/styles.css



/* 1. Global Styles
======================================== */

* {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
  z-index: 1;
  border: 1px solid white;
}

This file has been truncated. show original

link to how the website currently looks

https://mediumblock.github.io/Tea-Cozy/

amyhol · May 7, 2022, 10:53pm

Hi! It looks like the “figure” element you are using has a margin by default and that is creating the space between your elements. You likely need to add a style to remove the default margin of the element.

I hope this helps!

michael4220377918 · May 8, 2022, 5:05am

great! that fixed it thanks!