How to align items alongside each other-CodePudding

How would I create a background that only effects the area within the yellow lines?

I have tried adding padding, but that expands the page and does not effect the background color

How would I align the writing to the correct red squares?

If possible I would like pointers to good resources to learn CSS styling. I have tried align:centre, flexbox.

@import url("https://fonts.googleapis.com/css2?family=Noto Sans:ital,wght@0,400;1,700&display=swap");

* {
  font-family: "Noto Sans", sans-serif;
}

.body {
  background-color: #32a89d;
}
.homepage_text {
  font-family: "Noto Sans", sans-serif;
  text-decoration: none;
}

.container {
  margin-top: 5%;
  margin-left: 7%;
  margin-right: 7%;
}

.logo_header {
  margin-left: 7%;
}

.header_list {
  list-style: none;
  float: right;
  font-family: "Noto Sans", sans-serif;
}

header {
  display: flexbox;
}

/* Animated Text */

.wrapper {
  height: 45px;
  /*This part is important for centering*/
  display: flexbox;
  /* align-items: right; */
  justify-content: right;
  margin-right: 7%;
}

.typing-demo {
  width: 56ch;
  animation: typing 2s steps(40), blink 0.5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: "Noto Sans", sans-serif;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* End of Animated */

/* Navigation Bar */

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: fixed;
  top: 20px;
  left: 20px;

  width: 26px;
  height: 26px;

  cursor: pointer;
  z-index: 1;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 2px;

  background-color: #808080;

  transition-duration: 0.25s;
}
.menu__btn > span::before {
  content: "";
  top: -8px;
}
.menu__btn > span::after {
  content: "";
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;

  width: 300px;
  height: 100%;

  margin: 0;
  padding: 80px 0;

  list-style: none;

  background-color: #eceff1;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);

  transition-duration: 0.25s;
}

.menu__item {
  display: block;
  padding: 12px 24px;

  color: #333;

  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 600;

  text-decoration: none;

  transition-duration: 0.25s;
}
.menu__item:hover {
  background-color: #cfd8dc;
}

/* footer */

.facebook_icon {
  align-items: centre;
}

.footer_icons {
  list-style: none;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Doorways Derby</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='/style.css'>
    <script src='script.js'></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<header>
    <img class = 'logo_header' src = '/img/logo.png'
    <div >
        <input id="menu__toggle" type="checkbox" />
        <label  for="menu__toggle">
          <span></span>
        </label>
    
        <ul >
          <li><a  href="about.html">About Doorways</a></li>
                <li><a  href="contact.html">Contact Us</a></li>
                <li><a  href="get_involved.html">Get Involved</a></li>
                <li><a  href="more.html">More</a></li>
                <li><a  href="#"></a></li>
        </ul>
      </div>
      <div >
        <div >
            BE SOMEBODY THAT MAKES EVERYBODY FEEL LIKE A SOMEBODY
        </div>
    </div> 
      <li class = 'header_list'>
          <ul><b>Contact Number: 07754128763</b></ul>
      </li>
</header>
<body class = 'body'>
<div >
    <img class = 'img' src = '/img/122562126_1810506009098238_1438181275282.webp'>
    <h3> How we started </h3>
    <p class = 'homepage_text'> Doorways was co foundered by Craig (a full time working fabricator) and Lisa Wheatley (a school cook) with friends Patrick and Tina Hall in May 2015 to help homeless rough sleepers (around 15) in Derby city centre, by providing service users with a hot meal, a sandwich pack and a hot drink. </p>
    <p class = 'homepage_text'>This issue was brought to our attention after Lisa had helped another group within the city by cooking meals for them to give out to homeless people. We set up the group with friends and a few family members to help make sandwiches and distribute the items  and went out three nights a week.</p>
    <p class = 'homepage_text'> It soon became apparent that there was a bigger issue within the city of more vulnerable people than we had anticipated. People were coming to use our service from hostels, shared accommodation, people in their own property on low income and even people with no life skills to cook for themselves. Our numbers increased quite quickly and numbers went up to around 60 visitors by the end of 2015.</p>
    <p class = 'homepage_text'> Four years on and with the help and backing of several businesses, who help by donating end of day food items. and having a Facebook group with over 8000 members the support has been overwhelming.  We have a core group of volunteers who help with cooking and the running of Doorways on our nights out, we regularly see over 100 visitors on each of our nights out now and have recently become a non-profit making registered charity (1182774).</p>
    <p class = 'homepage_text'> Our aim is to have access to a building which we can use to cook the meals, use for storage and have as a drop in centre for people to come to for information in our sector, this is alongside still having our pop up street kitchen 3 nights a week.</p>
    <h2> THEN COVID-19 HIT.</h2>
    <p class = 'homepage_text'> Since March 2020, our plans have been put on hold as we have been unable to run the street kitchen and keep within the government guidelines set regarding social distancing and large gatherings in public spaces. We have however still been able to continue helping vulnerable people/families by setting up a food bank and produce table from our home address. We set up a food produce table twice a week on a Tuesday and a Saturday, where people can come along and take what they need to put meals on the table.</p>

    <p class = 'homepage_text'> We regularly see over 120 households each time we are open. In addition to this, we have delivered or had collected over 2000 food parcels to those in need.</p>
</div>

</body>
<footer class = 'footer'>
    <li class = 'footer_icons'>
        <ul class = 'facebook_icon'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg></ul>
    </li>
</footer>
</html>







<!-- <ul >
    <li><a  href="about.html">About Doorways</a></li>
          <li><a  href="contact.html">Contact Us</a></li>
          <li><a  href="get_involved.html">Get Involved</a></li>
          <li><a  href="more.html">More</a></li>
          <li><a  href="#"></a></li>
  </ul> -->

CodePudding user response：

I think you have miss-spelled the flexbox property. The property is display: flex; I don't think it's a good idea to have inside the tag. You can add the inside the container. It will help you to remove to the spacing issue.

CodePudding user response：

To get justify-content to work, the element itself needs to be displayed as flex:

display: flex;
justify-content: right;

Aplying this to your .wrapper and the "Be somebody..." text will actually go to the right.

For learning some more CSS i recommend W3Schoool(free) or Codecademy(not free).

CodePudding user response：

Flex is the answer! CSS-Tricks provides a lot of good, useful information about css. And flexbox froggy also helped me a lot to learn flexbox and grid.

If you flex a container, the children inside that container will align along eachother.

<div style="display: flex">
  <p>LEFT</p>
  <p>RIGHT</p>
</div>

You can then use justify-content and align-items, you align the content to your liking.

CodePudding user response：

For quick solution :

position: absolute;
right: 0; 
top: 35px;

There are many errors in your code, But hope so you will fix them, Best of luck.