how can I stop my site scrolling horizontaly and instead have it wrap onto a new line?-CodePudding

this might be a duplicate but I am new to this and am wondering how I can stop this horizontal scroll on my site, here is a link to it as a codepen codepen and here is it on github github as i have mentioned I am struggling to get the horizontal scroll to stop and I would rather it wraps onto a new line rather than having it scroll onto a white space here is an example of the issueexample of the issue thanks navbar code as this is causing issue

  <nav >
<div >
  <a href=index.html>
    <img src="Addy Schroeders.png" width="60px" height="60px">
  </a>
</div>
<div >
  <li>
    <a href="/">
      Home
    </a>
  </li>
  <li>
    <a href="/">
      About
    </a>
  </li>
  <li>
    <a href="/">
      help and resources
    </a>
  </li>
  <li >
    <a href="/">
      pages
    </a>
    <!-- DROPDOWN MENU -->
    <ul >
      <li>
        <a href="template.html">
          Dropdown 1
        </a>
      </li>
      <li>
        <a href="/">
          Dropdown 2
        </a>
      </li>
      <li>
        <a href="/">
          Dropdown 2
        </a>
      </li>
      <li>
        <a href="/">
          Dropdown 3
        </a>
      </li>
      <li>
        <a href="/">
          Dropdown 4
        </a>
      </li>
    </ul>
  <li>
    <a href="/">
      Contact
    </a>
  </li>
</div>
</ul>

CodePudding user response：

To wrap the content, you can use display: flex and flex-wrap: wrap. This should make it wrap to a new line and fix your issue!

CodePudding user response：

The flex-wrap CSS property can help you set whether flex items are either one line, or if they can wrap in multiple lines.